开发者问题收集

注入了 Javascript 的 Chrome 扩展程序-无法读取未定义的属性(读取“sendMessage”)

2022-12-04
948

我有一个在 DOM 中注入的脚本,我想在后台向我的服务工作者发送消息。我收到错误,但我不明白为什么。

这是我的 background.js 文件:

chrome.runtime.onMessage.addListener((req, sender, sendRes) => {
  console.log('this has worked', req, sender, sendRes('this worked'));
  return true;
});

这是我的 inject.js 文件,它注入了 injected.js (见下文)代码:

const s = document.createElement('script');
s.src = chrome.runtime.getURL('injected.js');
s.onload = function () {
  this.remove();
};
(document.head || document.documentElement).appendChild(s);

injected.js

console.log('fetch interceptor started');
const { fetch: origFetch } = window;
chrome.runtime.sendMessage({ works: 'This worked at least' }, (res) => console.log(res)); // Error is thrown immediately
window.fetch = async (...args) => {
  const response = await origFetch(...args);

  const url = new URL(args[0].url);
  //   sendMessageToBackground({ pathname, ...url.searchParams }); // not in use because it throws error at the top already
  response
    .clone()
    .json()
    .then(async (body) => await sendMessageToBackground({ pathname, body }))
    .catch((err) => console.error(err));

  return response;
};

async function sendMessageToBackground(msg) {
  const res = await chrome.runtime.sendMessage(msg);
  console.log('result message', res);
  console.log('msg', msg);
}

manifest.json (如果需要):

{
...
"permissions": ["storage", "activeTab", "scripting", "webRequest"],
  "host_permissions": ["https://REDACTED.com/*"],
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://REDACTED.com/*"],
      "run_at": "document_start",
      "js": ["inject.js"]
    }
  ],
  "web_accessible_resources": [{ "resources": ["injected.js"], "matches": ["https://REDACTED.com/*"] }],
...
}
1个回答

通过以声明方式或以编程方式通过“脚本”和\或“选项卡”权限允许的方法注入内容脚本,您将为网页带来一组属于扩展世界的对象,而您通常无法访问这些对象。

因此, inject.js 脚本将能够访问这些对象(在您的情况下为 chrome.runtime),而注入 ED .js脚本则不能。

我不知道您的中文框系统有什么用途,但我会尝试跳过inject.js并以声明方式注入injectED.js。

对于 await 语音与 .then 的结合,在我看来,没有禁忌症(至少乍一看)。 我以前写过使用这种组合的例程,从来没有遇到过问题。

syncmate
2022-12-04