chrome.scripting.executeScript 在我的清单 v3 Chrome 扩展中不起作用

Question

我有一个分机号

function doScript(window) {
  chrome.scripting.executeScript(
    {
      target: {tabId: window.tabs[0].id},
      files: ['myscript.js'],
    });
}

myscript.js 只是有

alert("Made it")

但我的标签中没有收到警报。

如果我将 tabId 更改为诸如 123 之类的随机值

  chrome.scripting.executeScript(
    {
      target: {tabId: 123},
      files: ['myscript.js'],
    });

然后我收到一个错误“未检查的 runtime.lastError：没有 id 为 123 的选项卡”

所以看起来我的 tabId 是正确的，但由于某种原因 myscript.js 没有触发警报。

如果我像这样弄乱脚本名称

  chrome.scripting.executeScript(
    {
      target: {tabId: window.tabs[0].id}},
      files: ['ttttttttttt.js'],
    });

我收到“runtime.lastError：无法加载文件：'ttttttttttt.js'。”

我尝试查看控制台日志，我看到的唯一一件事就是单击时出现此错误，但它看起来像一条红鲱鱼。

“未检查的 runtime.lastError：无法访问 url 的内容“”。扩展清单必须请求访问此主机的权限。” https://github.com/GoogleChrome/web-vitals-extension/issues/54

这是我的清单

{
    "manifest_version": 3,
    "name": "pokemon bokemon",
    "description": "",
    "version": "0.3.0",
    "action": {
        "default_popup": "popup.html"
    },
    "icons": {
        "16": "icon16.png",
        "32": "icon32.png"
    },
    "permissions": [
        "tabs",
        "storage",
        "scripting",
        "activeTab",
        "cookies"
    ],
    "host_permissions": [
        "*://*/*",
        "<all_urls>"
    ],
    "options_page": "options.html"
}

编辑：显然这是 chrome/manifest v3 中的一个错误。在这里打开了一个错误：https : //bugs.chromium.org/p/chromium/issues/detail?id=1191971

Answer 1

我也遇到了同样的问题，把我的经验分享如下。

如果您使用chrome.windows.create创建一个新选项卡（面板，弹出窗口，...），然后调用chrome.scripting.executeScript新选项卡。不幸的是，它不会起作用。

例如

// popup.js
const targetURL = 'templates/main.html'
chrome.windows.create(
  {
    focused: true,
    url: targetURL,
    type: 'popup',
  },
  (subWindow) => {
  }
)
// But you can put the ``chrome.scripting.executeScript``here, which will be fine.
chrome.scripting.executeScript({})

不适用于templates/main.html

// popup.js
const targetURL = 'templates/main.html'
chrome.windows.create(
  {
    focused: true,
    url: targetURL,
    type: 'popup',
  },
  (subWindow) => {
  }
)
// But you can put the ``chrome.scripting.executeScript``here, which will be fine.
chrome.scripting.executeScript({})

如果你想互相交流的话，可以尝试一下。

chrome.tabs.sendMessage(myTabID, {event: 'myTest'}, ({msg, other})=>{
  console.log(msg) // hello
  console.log(other) // test
})

chrome.runtime.onMessage.addListener((media, sender, sendResponse) => {
  if (media.event === 'myTest') {
    sendResponse({msg:"hello", other:"test"})
  }
})

sendMessage 和 onMessage 的补充

• chrome.tabs.sendMessage
• chrome.runtime.onMessage.addListener

如果您需要一个工作示例，可以参考我的存储库之一。

https://github.com/CarsonSlovoka/chrome/tree/7f1e731/tutorials/extensions/tabs-info

单击该按钮，以下日志将显示选项卡中的一些信息。

建议您的阅读顺序：

两部分

1. 发信息

   1. manifest.json -> popup.html
   2. popup.html -> popup.js
   3. popup.js -> main.html
   4. main.html -> main.js
   5. main.js：chrome.tabs.sendMessage

2. 消息上

   • manifest.json content_scripts：脚本/thumbnail.js
   • thumbnail.js：onMessage

补充

• 处理错误chrome.tabs.sendMessage：当你添加回调参数时，它会返回undefined。如果你想自己处理错误，你应该省略这个参数，它将返回Promise. 例子

Answer 2

[对于清单 v3]

您还可以直接执行函数而不是传递文件：

在manifest.json中添加这一行：

"permissions": ["scripting"]

 let [tab] = await chrome.tabs.query({ active: true, currentWindow: true })

 // Execute script in the current tab
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: (items) => {
      Object.keys(items).forEach((key) => {
        localStorage.setItem(key, items[key])
      })
    },
    args: [items] // pass any parameters to function
  })