个人中心
gpt4 book ai didi

javascript - 从 Background.js 在页面级执行代码并返回值

转载 作者：塔克拉玛干 更新时间：2023-11-02 22:02:35 25 4
gpt4 key购买 nike

我有一个网页，它有自己的脚本和变量，我需要执行这些脚本和变量并从我的扩展程序的 Background.js 中检索返回值。

我理解(我认为!)为了与网页交互，必须通过 chrome.tabs.executeScript 或 ContentScript 完成，但因为代码必须在原始页面的上下文中执行(为了具有脚本和变量的作用域)，需要先将其注入(inject)页面。

关注此great post by Rob W ，我能够调用页面级脚本/变量，但我很难理解如何以这种方式返回值。

这是我到目前为止所得到的......

网页代码(我想与之交互):

<html>
<head>
<script>
    var favColor = "Blue";

    function getURL() {
      return window.location.href;
    }
</script>
</head>

<body>
    <p>Example web page with script content I want interact with...</p>
</body>
</html>

list .json:

{
  // Extension ID: behakphdmjpjhhbilolgcfgpnpcoamaa
  "name": "MyExtension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "My Desc Here",
  "background": {
    "scripts": ["background.js"]
  },  
  "icons": {
    "128": "icon-128px.png"
  },
  "permissions": [
    "background",
    "tabs",
    "http://*/",
    "https://*/",
    "file://*/",           //### (DEBUG ONLY)
    "nativeMessaging"
  ]
}

background.js

codeToExec = ['var actualCode = "alert(favColor)";',
                  'var script = document.createElement("script");',
                  ' script.textContent = actualCode;',
                  '(document.head||document.documentElement).appendChild(script);',
                  'script.parentNode.removeChild(script);'].join('\n');
chrome.tabs.executeScript( tab.id, {code:codeToExec}, function(result) {
   console.log('Result = ' + result);
} );

我意识到代码目前只是“提醒”favColor 变量(这只是一个测试，以确保我可以看到它正常工作)。但是，如果我尝试返回该变量(通过将其保留为最后一条语句或通过说“return favColor”)，executeScript 回调永远不会有值。

所以，这里似乎(至少)有三个层次:

  1. background.js
  2. 内容脚本
  3. 实际网页(包含脚本/变量)

...我想知道从第 1 级到第 3 级(以上)和返回值的推荐方式是什么？

提前致谢:o)

最佳答案

您对 3 层上下文分离的理解非常正确。

  • 背景页面是一个单独的页面，因此不与可见页面共享 JS 或 DOM。
  • 内容脚本与网页的 JS 上下文隔离，但共享 DOM。
  • 您可以使用共享 DOM 将代码注入(inject)到页面的上下文中。它可以访问 JS 上下文，但不能访问 Chrome API。

为了进行通信，这些层使用不同的方法:

背景 <-> 内容 通过 Chrome API 讨论。
最原始的是 executeScript 的回调，但除了单行代码外，它不切实际。
常见的方法是使用 Messaging .
不常见，但可以使用 chrome.storage 及其 onChanged 事件进行通信。

页面<->扩展不能使用相同的技术。
由于注入(inject)的页面上下文脚本在技术上与页面自己的脚本没有区别，因此您正在寻找网页与扩展程序对话的方法。有两种方法可用:

  1. 虽然页面对 chrome.* API 的访问非常非常有限，但它们仍然可以使用 Messaging 来联系扩展程序。这是通过 "externally_connectable" method 实现的.

    我最近详细描述了它this answer .简而言之，如果您的扩展程序声明允许某个域与其通信，并且该域知道该扩展程序的 ID，则它可以向该扩展程序发送外部消息。

    好处是直接与扩展程序对话，但缺点是需要将您正在使用它的特定域列入白名单，并且您需要跟踪您的扩展程序 ID(但由于您正在注入(inject)代码，您可以提供带有 ID 的代码)。如果您需要在任何域上使用它，这是不合适的。

  2. 另一种解决方案是使用 DOM 事件。由于 DOM 在内容脚本和页面脚本之间共享，因此一个事件生成的事件将对另一个可见。

    文档演示了如何 use window.postMessage为了这个效果；使用自定义事件在概念上更加清晰。

    同样，我 answered about this before .

    此方法的缺点是要求内容脚本充当代理。内容脚本中必须包含以下内容:

    window.addEventListener("PassToBackground", function(evt) {
      chrome.runtime.sendMessage(evt.detail);
    }, false);

    当后台脚本使用 chrome.runtime.onMessage 监听器处理它时。

我鼓励您编写一个单独的内容脚本并使用 file 属性而不是 code 调用 executeScript，并且不依赖于它的回调.消息传递更清晰，并允许多次将数据返回到后台脚本。

关于javascript - 从 Background.js 在页面级执行代码并返回值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26140443/

25 4 0
文章推荐： ios - ARKit 2 卡住 : a bug or my misfortune?
文章推荐： Android PdfDocument 文件大小
文章推荐： ios - AVQueuePlayer 寻求问题(至 :) and CMTime
文章推荐： 安卓编码器复用器 : raw h264 to mp4 container
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com