将变量从 Chrome 扩展程序传递到打开的选项卡答案

【问题标题】：Pass variable from Chrome extension to opened tab将变量从 Chrome 扩展程序传递到打开的选项卡
【发布时间】：2017-10-23 05:53:31
【问题描述】：

在我的谷歌浏览器扩展中，用户点击链接，然后必须在页面上自动登录。
流程必须是这样的：用户单击 GC 扩展中的链接，脚本将获取所有必需的参数，然后发送到新打开的选项卡。
我的脚本必须在其中插入传递的参数并执行一些操作。
但我不明白，如何将变量从 GC 扩展脚本传递到新打开的选项卡？
这是我的 manifest.json

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",
 "content_scripts": [
    {
    "js": [ "window/content.js"],
    "matches": [
      "https://steamcommunity.com/login/home/?goto=",
      "http://steamcommunity.com/*",
      "https://steamcommunity.com/*"
    ]
   }
 ],
 "background": {
   "scripts": [
     "./scripts/back.js"
    ]
  },
 "web_accessible_resources": [
   "popup.js",
   "window/content.js"
 ],
"permissions": [
    "activeTab",
    "tabs",
    "<all_urls>",
    "cookies",
    "declarativeContent"
 ]

到目前为止，我已经尝试在 main.js 中使用它：

chrome.tabs.executeScript(
   tab1.id,
      {code: "var test =" + test
       allFrames: true
      },
      {file: "../popup.js"}, )
    })

但是当点击执行时，脚本打开新标签，并执行我写的所有内容，但看不到变量'test'。

【问题讨论】：

当file 和code 都被指定时，executeScript 显然只使用file。使用消息传递或简单地嵌套executeScript：外部运行code，在其回调中内部运行file。
脚本将在扩展范围内执行，因此很难向页面写入任何内容。我建议只使用localStorage。请记住，这会在会话之间持续存在，这可能是有利的，也可能是不利的，具体取决于您要执行的操作。

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

这并不难，只是一个棘手的问题：您需要从内容脚本中附加一个注入代码。

考虑这个例子：

manifest.json

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_end",
      "all_frames":false
    }
  ],

  "web_accessible_resources": [
    "inject.js"
  ]
}

content.js

var script = document.createElement('script'); 

script.src = chrome.extension.getURL('inject.js');
script.onload = function() {
    window.postMessage({ type: "FROM_MY_EXTENSIONS", value: "123" }, "*");
}

document.body.appendChild(script);

inject.js

window.addEventListener("message", function(event) {
    if(event.data.type === 'FROM_MY_EXTENSIONS') {
        window._test = event.data.value;
        console.log('_test:', _test);
    }
}, false);

此扩展将在任何选项卡中使用来自内容脚本消息的值创建新的_test 变量。

【讨论】：