无法使用 chrome 扩展从网页访问文档属性？

Question

所以有一个new API，作为 W3C 标准提出，但要使用它，您现在需要有 this extension。

该扩展添加了一个名为monetization 的额外document 键，您可以使用document.monetization 访问它。此外，该网站必须有一个payment pointer 才能访问它。

我正在尝试使用我正在开发的扩展程序来访问它，但我收到了一个未定义的错误。这是我的manifest.json

{
  "manifest_version": 2,
  "name": "Test Ext",
  "description": "Test Description",
  "version": "1.0.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_pop": "popup.html",
    "default_title": "A popup will come here."
  },
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["app.js"]
    }
  ]
}

在我的app.js 中，我制作了一个简单的脚本来检查document.monetization 是否已加载。

const tid = setInterval( function () {
    if (document.monetization === undefined) return;
    console.log('Accessible', document.monetization);
    clearInterval( tid );       
}, 100 );

但它不起作用。你是怎么处理的？

Answer 1

正如我们在该扩展的源代码中看到的那样，document.monetization 是标准 DOM document 接口上的 expando 属性，此属性不是 DOM 的一部分，它本质上是一个 JavaScript 对象，因此无法访问直接来自在孤立世界中运行的内容脚本 - 所有 JavaScript 对象/变量/扩展都是孤立的，因此页面脚本无法看到内容脚本的 JS 对象，反之亦然。

在 Chrome 中要访问这样的 expando 属性，您需要 run the code in page context，然后通过 CustomEvent 使用标准 DOM 消息来协调页面上下文中的代码和内容脚本，如同一主题中的 sibling answer 所示。

在 Firefox 中，您可以使用 wrappedJSObject 例如document.wrappedJSObject.monetization