Chrome 扩展：如何使用键盘事件从任何地方重新加载选项卡？答案

【问题标题】：Chrome Extension: How to reload tab from anywhere using keyboard events?Chrome 扩展：如何使用键盘事件从任何地方重新加载选项卡？
【发布时间】：2013-07-09 17:44:50
【问题描述】：

我在访问 Chrome 的标签 ID 时遇到问题。我可以获取它，但它仍然是 inside 扩展，我不能在 outside 扩展中使用它，尽管我能够记录键盘事件 outside 扩展名。

这是我想要做的：

用户导航到一个选项卡并使用“捕获”按钮获取 tabId
tabId 存储为全局变量
然后用户可以导航到其浏览器中的任何其他选项卡，并从那里使用组合键用户可以在任何给定时刻通过同时按 CTRL + SHIFT 重新加载捕获的选项卡

extension.html

<!DOCTYPE html>
<html>
<head>
  <title>Extension</title>
  <style>
  body {
    min-width: 357px;
    overflow-x: hidden;
  }
  </style>
    <p>Step 1. Navigate to tab you want to refresh and click the 'capture' button</p>
    <button type="button" id="capture">Capture!</button>
    <p id="page"></p>
    <p>Step 2. Now you can reload that tab from anywhere by pressing CTRL+SHIFT simultaneously</p>
  </div>

  <script src="contentscript.js"></script>
</head>
<body>
</body>
</html>

manifest.json

{
  "manifest_version": 2,

  "name": "Extension",
  "description": "This extension allows you to trigger page refresh on key combinations from anywhere",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*"],
      "run_at": "document_end",
      "js": ["contentscript.js"]
    }
  ],

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "extension.html"
  },
   "web_accessible_resources": ["script.js"],
   "permissions": [
    "tabs"
  ],
}

contentscript.js

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
(document.head||document.documentElement).appendChild(s);
s.parentNode.removeChild(s);

script.js

'use strict';

var isCtrl = false;
var tabId = 0;

document.onkeyup=function(e){
    if(e.which === 17) {
        isCtrl=false;
    }
};

document.onkeydown=function(e){
    if(e.which === 17) {
        isCtrl=true;
    }
    if(e.which === 16 && isCtrl === true) {
        /* the code below will execute when CTRL + SHIFT are pressed */

        /* end of code */
        return false;
    }
};

document.getElementById('capture').onclick = function(){
    chrome.tabs.getSelected(null, function(tab) {
        tabId = tab.id;
        document.getElementById('page').innerText = tab.id;
    });
};

我认为这是解决方案，但没有奏效：

/* the code below will execute when CTRL + SHIFT are pressed */

chrome.tabs.getSelected(null, function(tab) {
   chrome.tabs.reload(tabId);
});

/* end of code */

将var tabId = 0; 作为全局变量似乎毫无意义，所以我认为 消息传递 应该是解决方案，但问题是我不明白我应该如何实现它。

关于如何根据其 ID 从任何地方刷新选项卡的任何建议？

【问题讨论】：

标签： javascript google-chrome-extension tabs

【解决方案1】：

您的contentscript.js 只是一个文件，其中包含用 JavaScript 编写的编程指令。每次将这些指令加载到特定的执行环境中时，它们都会被解释为新的和新的。您的弹出窗口和内容脚本是独立的执行环境。

contentscript.js 文件本身不存储状态。当contentscript.js 在内容脚本环境中加载时，内容脚本执行环境不知道contentscript.js 还包含在何处。

此处使用的正确模式是保持background page 状态并记住最后捕获的选项卡的选项卡ID。弹出窗口将使用message passing 将当前选项卡ID 发送到后台页面（在弹出窗口中使用chrome.runtime.sendMessage，在后台页面中使用chrome.runtime.onMessage）。然后，稍后，内容脚本会在看到Ctrl+Shift 按下时向后台页面发送消息，并且后台页面将调用chrome.tabs.reload(tabId)。

在 extension.html 中，而不是您当前的 <script> 标签：

document.getElementById("capture").onclick = function() {
    chrome.tabs.getSelected(null, function(tab) {
        tabId = tab.id;

        // send a request to the background page to store a new tabId
        chrome.runtime.sendMessage({type:"new tabid", tabid:tabId});
    });
};

在 contentscript.js 内：

/* the code below will execute when CTRL + SHIFT are pressed */

// signal to the background page that it's time to refresh
chrome.runtime.sendMessage({type:"refresh"});

/* end of code */

background.js：

// maintaining state in the background
var tabId = null;

// listening for new tabIds and refresh requests
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {

        // if this is a store request, save the tabid
        if(request.type == "new tabid") {
            tabId = request.tabid;
        }

        // if this is a refresh request, refresh the tab if it has been set
        else if(request.type == "refresh" && tabId !== null) {
            chrome.tabs.reload(tabId);
        }
});

【讨论】：

我只是将内联脚本代码粘贴到 script.js 中，并在 extension.html 中将更改为，成功了