Question

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

以下是我要做的事情：

用户导航到选项卡并使用“捕获”按钮
获取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。

此处使用的正确模式是具有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);
        }
});

Chrome扩展程序：如何使用键盘事件从任何位置重新加载标签？

1 个答案: