带有 Manifest V3 的 Chrome 扩展程序可以在后台修改选项卡吗？答案

【问题标题】：Can a Chrome Extension with Manifest V3 modify tabs in the background?带有 Manifest V3 的 Chrome 扩展程序可以在后台修改选项卡吗？
【发布时间】：2021-07-18 08:44:03
【问题描述】：

我正在尝试进行 chrome 扩展程序开发，并希望制作一个扩展程序，以突出显示后台脚本中每个页面上的特定单词。
如果我给我的扩展程序 activeTab 权限，它会被列为“访问请求”，我需要通过打开弹出窗口来调用它，然后在重新加载页面后它会突出显示这个词。

documentation 说“基本上，activeTab 暂时授予了 tabs 权限”，所以我切换到授予 tabs 权限，因为我不想打开每次访问新网站时都会弹出。但是，现在扩展程序被列为“无需访问”并且无论我是否调用弹出窗口，突出显示都不起作用。

这是我的 service-worker background.js：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
  if (changeInfo.status == 'complete') {  
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      function: highlightwords,
    });
  }
})


function highlightwords(){
  var list = document.getElementsByTagName("p")
  var search_words = ["the", "it", "you"]
  var words = []

  for(var i = 0; i < list.length; i++){
    var words = list[i].textContent.split(' ')
    for (var j = 0; j < words.length; j++) {
      if (search_words.includes(words[j])) {
        console.log(words[j]);
        var elem = document.createElement("span")
        elem.textContent = words[j]
        elem.style.color = "red"
        words[j]=elem.outerHTML
      }      
    }
    
    list[i].innerHTML = words.join(' ')
  }
}

manifest.json：

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
      "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
  "options_page": "options.html",
  "permissions": ["storage", "scripting", "tabs"]
}

我会非常感谢任何关于这里出了什么问题或有哪些替代方案的提示（除了使用 manifest v2，它可能没有太多的未来，至少在 Chrome 中）。

【问题讨论】：

标签： google-chrome-extension permissions background service-worker

【解决方案1】：

tabs 权限的唯一目的是在changeInfo 和tab 对象中显示url，例如在 chrome.tabs.onUpdated 事件中。你不使用它，也不需要它来完成这项任务。

移除tabs和scripting权限，移除后台worker。

在 manifest.json 中声明 content script

"content_scripts": [{
  "matches": ["*://*/*"],
  "js": ["content.js"]
}]

content.js 将在所有 http/https 站点中运行（这是 *://*/* 中第一个 * 的含义）并突出显示文本。

附：请注意，您当前的代码会破坏页面添加到p 内任何嵌套元素的事件侦听器，因为您分配给innerHTML。这是不好的。更好的方法是使用 DOM 方法 createTreeWalker 和 splitText、example 或仅使用 mark.js 替换内联文本的匹配部分。

【讨论】：