Chrome扩展:如何使用键盘事件从任何地方重新加载选项卡
Chrome Extension: How to reload tab from anywhere using keyboard events?
我在访问Chrome的选项卡ID时遇到问题。我可以获取它,但它仍然在扩展插件内部,我不能在扩展插件外部使用它,尽管我可以在扩展插件外记录键盘事件。
以下是我要做的:
- 用户导航到选项卡并使用"捕获"按钮获取选项卡ID
- 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从任何地方刷新标签,有什么建议吗?
您的contentscript.js
只是一个包含用JavaScript编写的编程指令的文件。每次将这些指令加载到特定的执行环境中时,它们都被解释为新的和新的。您的弹出窗口和内容脚本是独立的执行环境。
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);
}
});
- 为什么不't Javascript对我的输入值进行了一些重新检查
- React重新渲染但未显示正确的组件
- Chrome扩展没有't在重新加载之前考虑期权价值
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 在非我的页面上重新加载CSS
- 重新分解jQuery函数
- 合并两个数组,重新调整循环js
- ROR:如何在不重新加载浏览器的情况下从控制器获取参数
- javascript无法重新定义函数内部的全局对象
- 如何重新附加eventListeners
- 仅重新加载网页的一部分
- 在ReactJS中重新渲染孩子3次可以接受吗
- 每次提交表单时都会重新加载网页
- django模板没有在AJAX发布后重新加载
- 用Javascript重新格式化复杂文本日期字符串的更好方法
- 页面在我的javascript执行后重新加载,我不希望它这样做
- 重新排列HTML元素的顺序并更改内容
- 如果30秒未单击,请应用CSS一次,将其删除,然后重新迭代
- 如何通过ajax增加/减少PHP变量值并重新加载函数
- onkeypress事件的奇怪行为页面重新加载如果"返回false;"是缺失的,否则它不会让我输入任