使用external_connectable将数据从WWW发送到Chrome扩展程序

Question

我希望将网站上的数据发送到Chrome扩展程序的LocalStorage。

我已经尝试了以下答案，这正是我正在寻找的，但它似乎在Chrome 29稳定版上根本无法正常运行。任何人都可以建议为什么这可能是/调整？

Answer 1

由于安全规则，无法从网站管理扩展程序的本地存储。

但是有一个method允许您将邮件从网站发送到扩展程序。

因此，您可以使用此方法将数据发送到扩展程序，并在扩展程序的后台页面上获取此数据，然后随意执行任何操作（保存到exension的localstorage）。

在DOCs，

中解释得非常好

1。在manifest.json中，您将允许您的网站允许发送消息。

"externally_connectable": {
  "matches": ["*://*.example.com/*"]
}

2。 chrome.runtime.sendMessage将在您的网站上提供。 （JavaScript的）

chrome.runtime.sendMessage("your extension id will be here", 
                           {data: { anyDataKey : "example"}});

3。在background.js中为外部消息创建消息监听器。

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (request.data)
      alert("Hi, there is message from the website");
      var data = request.data;
      // now the data is on your extension side, just save it to extension's localstorage.
  });

Answer 2

为了将数据从任何网页发送到您的扩展程序中，您需要将该数据发送到您的扩展程序和您的扩展程序后台文件中，您必须使用 runtime.onMessageExternal

是的，@okan-kocyigit 回答提供了关于我们如何允许我们的扩展程序连接并从任何外部网页接收数据的很好的信息。我只想更新最新的文档链接和最新的语法。请查看最新的chrome extension doc以获得清晰的思路。

如何将数据从网页发送到您的扩展程序

根据文档您可以通过在网页的 javascript 文件下方执行操作将任何数据发送到您的扩展程序

// The ID of the extension we want to talk to.
var yourExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request to send data to your extension:
chrome.runtime.sendMessage(yourExtensionId, {accessToken: "logged user's accessToken"},
   //below callback is optional
   function(response) {
      if (!response.success)
         handleError(url);
});

如何将上述外部数据从我们的网页接收到我们的扩展程序中

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    // console.log(sender) will be from where we sending data
    // console.log(request) data object which we send from our webpage
    if (request.accessToken) {
      // now we have the accessToken from our web page
      // so we can use it in our extension by storing into localStorage of extension 
      chrome.storage.sync.set({accessToken: request.chromeAccessToken}, function() {
        // console.log('accessToken value is set to ' + user.accessToken);
      });        
    }

点击此 Chrome 文档链接runtime.onMessageExternal了解更多详情

并且请不要忘记在 manifest.json 文件中添加 externally_connectable 以使其运行。

"externally_connectable": {
    "matches": ["*://*.yourapp.com/*", "*://yourapp.com//*"]
}