Chrome 扩展覆盖答案

【问题标题】：Chrome extension overlayChrome 扩展覆盖
【发布时间】：2017-10-02 07:29:21
【问题描述】：

我正在尝试制作一个 chrome 扩展程序，但有一些我不明白的地方，当我查找它时，我总是得到相反的建议，而且我什么也没做，所以我'我正在寻求你的帮助。

以下是我想介绍的功能示例：有了 overlay，我可以在包含相同文本区域的任何页面上使用 chrome 热键显示或隐藏，无论我在哪个标签或页面中（I'我猜我应该使用 js 将我的文本区域的内容发送到每个选项卡或页面的全局变量中。我还包含了 jquery，但必须将它包含在每个 html 中，不知道如何将它包含在我可以用于我制作的每个页面的地方。

我需要什么： - 如何包含叠加层 - 如何为您的扩展程序定义 chrome 热键 - 如何在每个页面和标签之间创建全局变量

谢谢

【问题讨论】：

请告诉我们您尝试了什么？
现在，我并没有走得太远，我所做的只是一个选项，我可以设置或重置用户名，并在单击扩展按钮时显示它：github.com/NecroSyri/digiapp
我设法找到了如何处理热键，使用清单中的“命令”和背景页面，其中有一个开关：chrome.commands.onCommand.addListener(function(command) {

标签： javascript jquery html css google-chrome

【解决方案1】：

好的，我现在已经解决了几乎所有的问题：

manifest.json：

"commands": {
    "toggle-digivice": {
      "suggested_key": {
        "default": "Ctrl+Space"
      },
      "description": "Show or hide digivice"
    }
  },
  "background": {
    "page": "pages/background.html"
  }

background.js

chrome.commands.onCommand.addListener(function(command) {
  //alert(command);
  switch(command){
    case "toggle-digivice" :
      console.log("toggle");
      toggle_digivice();
    break;
  }
});

function toggle_digivice(){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(tabs[0].id,{file:"js/overlay.js"});
  });
}

overlay.js：

document.body.innerHTML += "<div id='overlay'>overlay.html</div>";

现在，我需要更新背景叠加层，并弄清楚如何将背景内容调用到 innerHTML。

【讨论】：