如何在Chrome扩展开发中将值传递给页面？

Question

我有一个弹出式窗口，称之为“welcome.html”，我想我们该做的是，当用户选择一个文本，然后单击我的插件，它会使用一些页面信息，并打印回欢迎。 HTML。例如，网站标题以及用户选择的文本和网址。但是，我怎样才能将价值传递给welcome.html？谢谢。

Answer 1

我my extension做了很多的这个，因为它煤矿大量数据能够很容易地将其复制到剪贴板的用户。

既然你正在寻找少了很多数据，它甚至更简单。当您的弹出窗口被加载时，您可以调用以下函数来检索您需要的信息;

function getData(callback) { 
    chrome.tabs.getSelected(null, function (tab) { 
     var data = { 
      selection: '', 
      title: tab.title, 
      url: tab.url 
     }; 
     /* 
     * We can't call content scripts on some pages and the process will get 
     * stuck if we try. 
     */ 
     if (tab.url.indexOf('chrome') === 0 || 
       tab.url.indexOf('https://chrome.google.com/webstore') === 0) { 
      callback(data); 
     } else { 
      chrome.tabs.sendRequest(tab.id, {}, function (response) { 
       data.selection = response.selection; 
       callback(data); 
      }); 
     } 
    }); 
} 

确保您传入一个回调函数，一旦所有数据被提取，将会调用该函数;

getData(function (data) { 
    console.log('Title: ' + data.title); 
    console.log('URL: ' + data.url); 
    console.log('Selected Text: ' + data.selection); 
    // Display the data instead 
}); 

正如您可能已经注意到getData函数发送请求到选定的选项卡。一个content script将需要的页面将被注入为了这个工作，所以要确保你已经调用getData之前正确或injected it programmatically配置您的清单，否则将无法正常工作。需要注入的脚本应该类似于以下内容;

(function() { 
    chrome.extension.onRequest.addListener(function (request, sender, 
      sendResponse) { 
     sendResponse({ 
      selection: window.getSelection().toString() 
     }); 
    }); 
})(); 

这只是返回当前选定的文本。一个值得关注的是，这个数据查找可能导致轻微的停顿，而弹出窗口渲染，但你应该测试这个自己和自己做个实验，但也有solutions。

这应该涵盖所有你需要知道的这么好运气，让我知道如果你需要任何进一步的帮助我所知，如果你是新来的Chrome扩展程序，这可能会稍微压倒。