Chrome 扩展程序:后台页面间隔运行，但看不到 jQuery 插件

Question

我正在创建一个具有背景的chrome扩展程序，该扩展程序每秒运行一次并更新chrome.storage...它被称为artistSetter.js.在这里：

chrome.storage.local.get(function(items){
    $.each($('#supplySong > a > span.sidebar-heading'), function(){
        if ($(this).css('background-color') == 'rgb(22, 156, 217)'){
            chrome.storage.local.set({"currentArtist": $(this)[0].innerText});
        }
    });
});

背景页面是这样的：

setInterval(function () {
    chrome.tabs.executeScript(null, {file: 'js/artistSetter.js'});
}, 1000);

错误是这样的：

响应 storage.get 时出错：引用错误：$ 未定义

问题是这在页面刷新后起作用。我明白，这有效，因为我jQuery.js开始跑步。但是当我单击Reload按钮时，它停止工作，并且我开始每秒收到错误。同样，刷新后，它可以工作。因为jQuery.js开始工作。

我该如何解决这个问题？真的找不到办法。

Answer 1

在运行artistSetter.js之前添加所需的插件，例如：

setInterval(function () {
    chrome.tabs.executeScript(null, {file: 'jquery.js'});
    chrome.tabs.executeScript(null, {file: 'js/artistSetter.js'});
}, 1000);

Answer 2

为什么不把setInterval逻辑放到内容脚本中，只保留artistSetter.js并删除背景页面？

Manifest.json

"content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "jquery.js",
        "artistSetter.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ],

艺术家塞特.js

setInterval(function () {
    chrome.storage.local.get(function(items){
        $.each($('#supplySong > a > span.sidebar-heading'), function(){
            if ($(this).css('background-color') == 'rgb(22, 156, 217)'){
                chrome.storage.local.set({"currentArtist": $(this)[0].innerText});
            }
        });
    });
}, 1000);

Answer 3

作为其他解决方案，您可以使用一些工具（例如grunt-contrib-concat）将两个脚本文件连接成一个文件。