将选项卡导航到 URL 并在其中执行脚本

Question

我正在努力让这个简单的 f-ty 工作...我的情况是：

获取当前URL
修改它
navigate/redirect到
在那里执行自定义 JS 代码

我遇到最多的问题是 4)

manifest.json

{
  "name": "Hello, World!",
  "description": "Navigate and execute custom js script",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "tabs",
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {}
}

background.js

function myCustomScript() {
    alert('myCustomScript test ok!');
    console.log('myCustomScript test ok!');
}

chrome.action.onClicked.addListener((tab) => {

    chrome.tabs.update({url: "https://example.com"}, myCustomScript);

});

页面被重定向但是我的js函数没有执行！你知道为什么以及如何解决它吗？

P.S：这是我第一次创建我的 chrome 扩展，也许我做错了什么......

Answer 1

要执行自定义代码，请使用 chrome.scripting API。对于这种情况，您需要：

"scripting" 添加到您已有的 "permissions"，
"https://example.com/" 添加到 manifest.json 中的 "host_permissions"。

请注意，在导航到具有不同来源的 URL 后，activeTab 权限不会应用于选项卡，因为此权限仅适用于当前显示的来源。

由于bug in Chrome，需要等待URL设置好后才能执行脚本.
该错误已在 Chrome 100.

中修复

chrome.action.onClicked.addListener(async tab => {
  await chrome.tabs.update(tab.id, {url: "https://example.com"});
  // Creating a tab needs the same workaround
  // tab = await chrome.tabs.create({url: "https://example.com"});
  await onTabUrlUpdated(tab.id);
  const results = await chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content.js'],
  });
  // do something with results
});

function onTabUrlUpdated(tabId) {
  return new Promise((resolve, reject) => {
    const onUpdated = (id, info) => id === tabId && info.url && done(true);
    const onRemoved = id => id === tabId && done(false);
    chrome.tabs.onUpdated.addListener(onUpdated);
    chrome.tabs.onRemoved.addListener(onRemoved);
    function done(ok) {
      chrome.tabs.onUpdated.removeListener(onUpdated);
      chrome.tabs.onRemoved.removeListener(onRemoved);
      (ok ? resolve : reject)();
    }
  });
}

P.S。 alert 不能在 Service Worker 中使用。相反，您应该查看 devtools console of the background script or use chrome.notifications API.

将选项卡导航到 URL 并在其中执行脚本

Navigate tab to a URL and execute script inside

google-chrome-extension

chrome-extension-manifest-v3