Question

我正尝试在点击扩展按钮页面上分配的特殊标签上运行一些脚本。

例如，如果我单击popup.html上的按钮，则即使我切换到另一个选项卡，它也应仅在此页面上运行至脚本末尾。

我的算法是这样的：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  //Some other processes
  chrome.tabs.getSelected(null,function(tabS) {
    //Some other processes
    chrome.tabs.executeScript(null, {file:"some_js.js"});
  });
});

我正在页面上使用一些DOM操作。如果切换到另一个选项卡，则该过程将中断，因为它会侦听当前的选项卡。我想为进程标签分配一个ID，并使此代码在此标签上工作。我该怎么办？

Answer 1

在popup.html中添加一个按钮元素。然后将此代码添加到popup.js：

function handleClick (e) {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.executeScript(tabs[0].id,
        { code: `setInterval(function () { console.log('This event is running only at the tab with domain: ${tabs[0].url} after 1000ms') }, 1000)` })
  })
}

document.addEventListener('DOMContentLoaded', function () {
  const button = document.getElementById('popup-button')
  button.addEventListener('click', handleClick)
});

单击按钮时，该代码将仅在该特定选项卡中执行。您将能够在开发人员控制台中看到该消息。

代码也可以是扩展名中的另一个JS文件。就像您在问题中所做的一样。

Obs：chrome.tabs.query在这里并不是真正必要的，就好像您执行chrome.tabs.executeScript传递null作为参数一样，它已经在当前窗口中获得了活动选项卡。我还添加了tabs权限以获取tabs[0].url属性。无论如何，当您获得标签的tabId和url属性时，您可以更好地控制要操作的标签。

Chrome扩展程序在特殊选项卡上运行该过程

1 个答案: