Question

我在这里询问我的Chrome扩展程序如何能够在整个用户刷新页面并在选择功能后更改页面时“生存”。

例如，让我们使用相当通用的背景颜色更改设置来更改所需网站的背景颜色。勾选启用框并将背景更改为所选选项后，在更改页面或刷新后它不会保持持久性。我在这里询问是否有人可以帮助我提供一些比developer.chrome网站更有帮助的有用资源。

编辑：我的问题更好的例子，这是我的不好。如果你们中的任何人都知道Twitch的“BetterTTV”这样的扩展，它有一个选项菜单。其中一个选项是“夜间”选项，其中提到将整个网站变为“夜间颜色”，例如白色到黑色和黑色文本。此选项一旦启用，即可在整个网站上看到，即使Chrome关闭，仍然可以在下次打开时生成更改。如果我理解所说的内容是正确的，那么使用Chrome存储将保留用户在页面上生成的此类操作，直到禁用为止。

谢谢。

Answer 1

内容脚本可以在网页保留在选项卡中的同时存活（即不通过刷新或导航到新页面）。你不能再这样做了。从Chrome启动到退出运行Chrome时，可以存在后台脚本。如果要保存设置，可以使用chrome.storage，或将设置存储在后台页面中。然后，您可以在刷新页面或用户导航到新页面时再次启动内容脚本时读取设置或从后台页面获取设置。使用chrome.storage将允许您保留该选项，直到关闭为止。使用chrome.storage，即使Chrome退出并稍后重新启动，选项信息仍然可用。如果您只是将数据存储在后台页面中的变量中，则不会在退出并重新启动Chrome时保留该数据。

如果您要更改内容脚本中的设置，它只会在内容脚本中存活，除非您在某处获得信息，否则它将持续更长时间。这意味着chrome.storage或messaging the information to a background script。无论哪种方式，如果您希望在下一次运行内容脚本（刷新，导航）时激活该设置，您将必须返回设置（例如，从chrome.storage读取或从后台脚本接收消息。）< / p>

通常，更改内容脚本中的选项可能不是一个好主意。在内容脚本中完成此操作并不常见。另一方面，根据您的操作，在内容脚本中更改某些扩展程序选项可能是最合适的。

如何最好地组织这取决于你在做什么。更进一步确实需要您提供更多信息（例如显示您正在做的事情的代码）。虽然通常不会从内容脚本更改，但仍有许多示例可以保留设置。设置主要是从options pages，弹出窗口等更改

如果您的功能像＆＃34;勾选启用框并将背景更改为所选选项＆＃34;那么，在内容脚本中进行选择并不是一个好主意。在这种情况下，你应该有一个browser_action按钮，它可以是一个切换，或者弹出一个弹出窗口，可以选中一个复选框（如果你有多个选项）。然后，只有在启用该功能时，后台脚本才会使用chrome.tabs.executeScript()注入内容脚本。

<强>更新
根据您添加到问题中的新信息，听起来您应该使用弹出窗口，这将允许您有多个选项，或者启用了加载项的网站列表。如果您正在寻找示例，可以查看Chrome developer options page example。除了作为选项页面之外，您还可以将其作为弹出窗口添加到 manifest.json

中。

"browser_action": {
    "default_icon": {
        "48": "myIcon.png"
    },
    "default_title": "Show panel",
    "default_popup": "options.html"
},

如果有兴趣，我对this question的回答显示使用单个页面作为选项页面和弹出窗口。它显示了如何将选项页面中的数据导入chrome.storage并将其读回。它比可能需要的要复杂一点，因为它显示了将信息从弹出窗口传递到后台页面的四种略有不同的方法。它经过测试，可在Chrome和Firefox中使用。

以下是从useDirect读取数据（emailAddress和chrome.storage）并将信息放入DOM（在选项页面/弹出窗口中显示当前值）的示例：

// Restores select box and input using the preferences
// stored in chrome.storage.
function useStoredOptionsForDisplayInDOM() {
    chrome.storage.local.get({
        useDirect: 0,
        emailAddress: '',
        enabled: false
    }, function(items) {
        //Store retrieved options as the selected values in the DOM
        document.getElementById('useDirect').value = items.useDirect;
        document.getElementById('email').value = items.emailAddress;
        document.getElementById('enabled').checked = items.enabled;
    });
}

这就是chrome.storage中存储相同值的方式：

function saveOptions() {
    let useDirectValue = document.getElementById('useDirect').value;
    useDirectValue = +useDirectValue; //Force to number, not a string
    let email = document.getElementById('email').value;
    let functionEnabled = document.getElementById('enabled').checked;
    chrome.storage.local.set({
        useDirect: useDirectValue,
        emailAddress: email,
        enabled: functionEnabled
    });
}

HTML的<body>：

<body>
    <div id="optionsArea">
        Use direct method:
        <select id="useDirect">
            <option value="0">Option 0</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">option 3</option>
        </select>
        <div>Email:
            <input id="email"></input>
        </div>
        <label>
            <input type="checkbox" id="enabled">
            Enable functionality.
        </label>
    </div>
   <script src="options.js"></script>
</body>

Chrome扩展程序 - 在整个网站中保存设置并刷新页面

1 个答案: