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的响应错误：ReferenceError：$未定义

事情是，这是在页面刷新后工作。我明白，这是有效的，因为我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
    }
  ],

artistSetter.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）。

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

3 个答案: