Question

我尝试在browser_action和content_scripts之间共享数据。

目前，我遇到了一个问题，我可以访问browser_action页面中的数据（一旦设置并在会话中保存，它就会返回正确的值）。

然而，即使将其保存在browser_action.js中，我似乎也无法访问content_script中的数据。 console.log始终返回＆＃34; undefined＆＃34;为了价值。

预期的工作流程将是：

content_script:

if syncData === undefined {
    /* Do default stuff */
} else if syncData {
    /* Do stuff if set to true */
} else {
    /* Do stuff if set to false */
}

browser_action.js:

/* Allow user to set syncData so that it saves across page refreshes and is accessible by content_script */

的manifest.json

{
    "manifest_version": 2,

    "name": "Name",
    "description": "Description",
    "version": "1.0",
    "content_scripts": [
        {
            "js": ["content_script.js"]
        }
    ],
    "browser_action": {
        "default_icon": "icon128.png",
        "default_popup": "browser_action.html"
    },
    "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "permissions": [
        "storage"
    ]
}

content_script.js

chrome.storage.sync.get('descriptionEnabled', function (data) {
    console.log(data.descriptionEnabled)
});

browser_action.js

/*jslint browser: true*/
/*global window, document, alert, chrome */

window.onload = function () {
    "use strict";
    chrome.storage.sync.get('descriptionEnabled', function (data) {
        if (data.descriptionEnabled === true) {
            document.getElementById("settingsId").value = "on";
        } else if (data.descriptionEnabled === false) {
            document.getElementById("settingsId").value = "off";
        }
    });
    document.getElementById("settingsId").onchange = function () {
        if (document.getElementById("settingsId").value === "on") {
            chrome.storage.sync.set({'descriptionEnabled': true});
        } else {
            chrome.storage.sync.set({'descriptionEnabled': false});
        }
    };
};

browser_action.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <script type="text/javascript" src="browser_action.js"></script>
        <title>Description Background Page</title>
    </head>
    <body>
        <div>Display Saved Notifications?</div>
        <div>
            <select id="settingsId">
                <option value="on">Yes</option>
                <option value="off">No</option>
            </select>
        </div>
    </body>
</html>

Answer 1

要存储扩展程序的用户数据，您可以使用storage.sync或storage.local。使用storage.sync时，只要用户启用了同步功能，存储的数据就会自动同步到用户登录的任何Chrome浏览器。

当Chrome处于离线状态时，Chrome会在本地存储数据。下次浏览器在线时，Chrome会同步数据。即使用户停用同步，storage.sync仍然有效。在这种情况下，它的行为与storage.local相同。

查看此document以获取更多信息和示例代码。

对于您收到的错误，您可以阅读此blog了解更多信息。它解释了在console.log中获取未定义的含义和原因是什么

同时尝试检查此SO question。它认为它将对内容脚本和后台操作有很大帮助。

Answer 2

首先，不要忘记在matches添加manifest.json字段。

您的代码运行良好，但请注意在弹出页面加载和选项更改后设置存储，因此您需要刷新网页以重新加载内容脚本以使其再次执行，然后您将在当前网页的控制台中看到true或false。

Answer 3

虽然消息传递是内容和扩展脚本之间通信的最常用方式，但您也可以使用存储。在内容脚本中，为存储的已更改事件添加侦听器：

chrome.storage.onChanged.addListener(function(changes, areaName){
if(areaName=="sync"){
  if(changes.descriptionEnabled) 
    console.log(changes.descriptionEnabled.newValue);
  }
});

存储（尤其是本地存储）非常快，因此有时候，当您需要将数据保存到存储中时，监听存储更改而不是消息是有意义的。

与消息传递的另一个区别是此事件仅在更改的值上触发。如果您的值为true，并且新值也为true，则不会触发该事件。

从content_scripts和browser_action访问chrome同步数据

3 个答案: