Javascript 间隔ID由“设置”；网络“可访问的”资源；当脚本源于“时，脚本未被清除”；背景>；脚本“；他正在试图清除它

我做了一个Chrome扩展，其中abc.js从manifest.json的“web\u accessible\u resources”字段运行。我在全局范围内声明了一个名为“var autoScrollStatus”的变量。我用零初始化它，但最终会将setInterval ID存储到其中

有一次，我必须从“var autoScrollStatus”中清除此setIntervalID。因此，一个def.js文件（从manifest.json中的后台>脚本启动）包含代码

clearInterval（autoScrollStatus）

运行，但当它到达这一行时，def.js崩溃并出现主题错误

但是如果我运行

clearInterval（autoScrollStatus）

在Chrome开发工具中，它运行得很好。如果我提到

delete window.autoScrollStatus

在def.js中，它运行时也没有任何错误。这显然意味着作用域在这里不是问题，那么为什么它只有在尝试清除setInterval（）ID时才会抛出ReferenceError呢

你知道这里发生了什么吗？谢谢

编辑-以下是我正在使用的脚本：

这是abc.ts：

var asSpeeds = {1: 250, 2: 150, 3: 100, 4: 90, 5: 75, 6: 60, 7: 50, 8: 40, 9: 30};
var chordsTA:HTMLTextAreaElement = document.querySelector("#chordsTA");
var asBtn:HTMLButtonElement = document.querySelector("#asBtn");
var autoScrollSpeed = 250;
var autoScrollStatus = 0;

function toggleAutoScroll() {
    if(autoScrollStatus){
        clearInterval(autoScrollStatus);
        autoScrollStatus = 0;
        console.log("Stopped autoscroll.");
        return;
    }
    
    autoScrollStatus = setInterval(_=>{chordsTA.scrollBy(0, 1)}, autoScrollSpeed);
    console.log("Started autoscroll.")
}

var speedUpAS = () => {
    console.log("Speeding upppppppppppppppppppp")
    let asBtnText = asBtn.getAttribute('data-front');
    let newSpeed:number = parseInt(asBtnText.charAt(asBtnText.length - 1))+1;
    if (newSpeed in asSpeeds){
        clearInterval(autoScrollStatus);
        autoScrollStatus = 0;
        autoScrollStatus = setInterval(_=>{chordsTA.scrollBy(0, 1)}, autoScrollSpeed);
    }
}

var speedDnAS = () => {
    console.log("Speeding downnnnnnnnnnnnnnnnnn")
    let asBtnText = asBtn.getAttribute('data-front');
    let newSpeed:number = parseInt(asBtnText.charAt(asBtnText.length - 1))-1;
    if (newSpeed in asSpeeds){
        clearInterval(autoScrollStatus);
        autoScrollStatus = 0;
        autoScrollStatus = setInterval(_=>{chordsTA.scrollBy(0, 1)}, autoScrollSpeed);
    }
}

这是def.ts：

console.log("deactivating extension");
clearInterval(autoScrollStatus);

在def.ts中，我还尝试了console.logging autoScrollStatus和abc.ts文件中定义的其他全局变量，但每个变量都得到一个ReferenceError，这意味着肯定存在范围问题（我已纠正）。对解决这个问题有什么建议吗？我可以在ChromeDevTools中访问这些全局变量，没有任何问题

manifest.json也是这样的：

{
    "name": "YouTube Overlay",
    "version": "0.1",
    "manifest_version" : 2,
    "description": "Lays overlay on YouTube, can be used for chords/lyrics.",
    "background" : {
      "scripts" : ["bg.js"]
    },
    "permissions": ["activeTab"],
    "browser_action": {},
    "web_accessible_resources": ["abc.js"]
  }

这是bg.js：（基本上它使图标充当我的扩展的打开/关闭开关）

---

这是一个范围问题。由abc.ts初始化的全局变量（从web可访问资源初始化）对def.ts不可见（从后台>脚本初始化）。因此，我没有尝试从abc.ts（在每个出口上）清除intervalID，而是修改了我的abc.ts以清除intervalID（在每次初始化时），以便清除以前剩余的任何intervalID，如果不存在，也不会抛出任何错误。这是新的abc.ts：

clearInterval(autoScrollStatus) // no need to use try...catch as weirdly doesn't throw any error on first run!

// rest of the code same as in my question

var asSpeeds = {1: 250, 2: 150, 3: 100, 4: 90, 5: 75, 6: 60, 7: 50, 8: 40, 9: 30};
var chordsTA:HTMLTextAreaElement = document.querySelector("#chordsTA");
var asBtn:HTMLButtonElement = document.querySelector("#asBtn");
var autoScrollSpeed = 250;
var autoScrollStatus = 0;

---

web\u accessible\u resources脚本作为

script

DOM元素添加到页面中，因此它不会在内容脚本的特殊固有“孤立世界”中运行。如果需要进一步帮助，您需要在问题中添加一个。您好@wOxxOm，我已经添加了MCVE。如果有人能指点解决这个问题，我将不胜感激。如果需要任何其他信息，请让我知道，谢谢。我不明白你为什么要这样做，所以我只能说不要这样做：改用内容脚本。原因：我根本没有使用任何内容脚本。我的背景脚本（ghi.js）在DOM中注入了一个按钮。该按钮附带了一个onClick函数，需要在web\u accessible\u resources脚本（abc.js）中定义，因为如果我在ghi.js中定义它，该按钮将找不到该函数。我已将问题更新为包含Manifest.json和background.js。您已经在使用内容脚本，因为这就是injection所做的：它将代码作为内容脚本运行。这意味着你不需要网络资源。相反，您应该像document.appendChild（元素）一样在js中添加click侦听器；element.onclick=（）=>{…}

clearInterval(autoScrollStatus) // no need to use try...catch as weirdly doesn't throw any error on first run!

// rest of the code same as in my question

var asSpeeds = {1: 250, 2: 150, 3: 100, 4: 90, 5: 75, 6: 60, 7: 50, 8: 40, 9: 30};
var chordsTA:HTMLTextAreaElement = document.querySelector("#chordsTA");
var asBtn:HTMLButtonElement = document.querySelector("#asBtn");
var autoScrollSpeed = 250;
var autoScrollStatus = 0;