Chrome擴展程序：如何使用鍵盤事件從任何地方重新加載標簽頁？

Question

我在訪問Chrome瀏覽器的標簽ID時遇到問題。 我可以獲取它，但它仍保留在擴展程序內部，盡管我能夠在擴展程序外部記錄鍵盤事件，但我無法在擴展程序外部使用它。

這是我想做的事情：

用戶導航到標簽，並使用“捕獲”按鈕獲取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從任何位置刷新選項卡的任何建議？

Answer 1

您的contentscript.js只是一個包含用JavaScript編寫的程序指令的文件。 每次將這些指令加載到特定的執行環境中時，這些指令將被解釋為全新的。 您的彈出窗口和內容腳本是單獨的執行環境。

contentscript.js文件本身不存儲狀態。 在contentscript.js腳本環境中加載contentscript.js ，內容腳本執行環境不知道在哪里還包含contentscript.js 。

此處使用的正確模式是使后台頁面保持狀態並記住最后捕獲的選項卡的選項卡ID。 彈出窗口將使用消息傳遞到當前的標簽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);
        }
});

Chrome擴展程序：如何使用鍵盤事件從任何地方重新加載標簽頁？

問題描述

1 個解決方案

解決方案1
1 已采納 2013-07-09 19:52:41

Chrome擴展程序：如何使用鍵盤事件從任何地方重新加載標簽頁？

問題描述

1 個解決方案

解決方案1 1 已采納 2013-07-09 19:52:41

解決方案1
1 已采納 2013-07-09 19:52:41