我想为我的chrome扩展重新加载每次我保存在扩展文件夹中的文件,而不必显式点击“重新加载”在chrome://extensions/。这可能吗?
编辑:我知道我可以更新Chrome重新加载扩展的间隔,这是一个中途的解决方案,但我宁愿让我的编辑器(emacs或textmate)触发保存重新加载或要求Chrome监控目录的变化。
我想为我的chrome扩展重新加载每次我保存在扩展文件夹中的文件,而不必显式点击“重新加载”在chrome://extensions/。这可能吗?
编辑:我知道我可以更新Chrome重新加载扩展的间隔,这是一个中途的解决方案,但我宁愿让我的编辑器(emacs或textmate)触发保存重新加载或要求Chrome监控目录的变化。
当前回答
这正是AutoIt等软件或替代软件大放异彩的地方。关键是编写一个模拟当前测试阶段的脚本。至少要习惯使用其中的一种,因为许多技术都没有明确的工作流程/测试路径。
Run("c:\Program Files (x86)\Google\Chrome\Application\chrome.exe")
WinWaitActive("New Tab - Google Chrome")
Send("^l")
Send("chrome://extensions{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}{TAB}{TAB}{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Developer Tools")
Send("^`")
显然,您更改了代码以适应您的测试/迭代需求。确保标签点击是真的锚标签是在chrome://扩展站点。您还可以使用相对于窗口的鼠标移动和其他类似的宏。
我将以类似于下面的方式将脚本添加到Vim:
map <leader>A :w<CR>:!{input autoit loader exe here} "{input script location here}"<CR>
这意味着当我在Vim中,我按下ENTER上面的按钮(通常负责:|和\),即领导按钮,并跟随一个大写的“a”,它保存并开始我的测试阶段脚本。
请确保填写{input…}节在上面的Vim/热键脚本适当。
许多编辑器允许你用热键做类似的事情。
可以在这里找到AutoIt的替代品。
Windows: AutoHotkey
Linux: xdotool, xbindkeys
Mac: Automator
其他回答
这里有一个函数,您可以使用它来监视文件的更改,并在检测到更改时重新加载。它通过AJAX轮询它们,并通过window.location.reload()重新加载。我想你不应该在分发包中使用这个。
function reloadOnChange(url, checkIntervalMS) {
if (!window.__watchedFiles) {
window.__watchedFiles = {};
}
(function() {
var self = arguments.callee;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (__watchedFiles[url] &&
__watchedFiles[url] != xhr.responseText) {
window.location.reload();
} else {
__watchedFiles[url] = xhr.responseText
window.setTimeout(self, checkIntervalMS || 1000);
}
}
};
xhr.open("GET", url, true);
xhr.send();
})();
}
reloadOnChange(chrome.extension.getURL('/myscript.js'));
这不能直接完成。对不起。
如果你想把它作为一个功能,你可以在http://crbug.com/new上请求它
BROWSER-SYNC
使用惊人的浏览器同步
更新浏览器(任何)当源代码改变(HTML, CSS,图像等) 支持Windows、MacOS和Linux操作系统 您甚至可以使用移动设备观看您的代码更新(实时)
MacOS上的安装(查看其他OS上的安装帮助)
安装NVM,这样您就可以尝试任何Node版本
brew install nvm # install a Node version manager
nvm ls-remote # list available Node versions
nvm install v10.13.0 # install one of them
npm install -g browser-sync # install Browser-Sync
如何使用浏览器同步静态网站
让我们来看两个例子:
browser-sync start --server --files . --host YOUR_IP_HERE --port 9000
browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000
——server选项允许您在终端的任何地方运行本地服务器,而——files选项允许您指定将跟踪哪些文件的更改。我更喜欢对跟踪的文件更具体,因此在第二个示例中,我使用ack来列出特定的文件扩展名(重要的是这些文件没有带空格的文件名),并使用useipconfig来查找我在MacOS上的当前IP。
如何使用浏览器同步动态网站
如果您正在使用PHP、Rails等,您已经有一个正在运行的服务器,但是当您更改代码时它不会自动刷新。所以你需要使用——proxy开关让browser-sync知道该服务器的主机在哪里。
browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open
在上面的例子中,我已经在浏览器的192.168.33.12:3000上运行了一个Rails应用程序。它实际上运行在使用Vagrant盒子的虚拟机上,但我可以使用该主机上的端口3000访问虚拟机。我喜欢——no-notify来停止浏览器同步,每次我修改代码时,都会在浏览器上发送通知警报,——no-open来停止浏览器同步行为,当服务器启动时立即加载浏览器选项卡。
重要提示:如果您正在使用Rails,请避免在开发中使用Turbolinks,否则在使用——proxy选项时将无法单击链接。
希望对别人有用。我尝试了许多技巧来刷新浏览器(甚至是我之前使用AlfredApp提交的关于这个StackOverflow问题的旧帖子),但这是真正的方法;没有更多的黑客,它只是流动。
CREDIT:用一个命令启动本地实时重载web服务器
在任何场合或事件中
chrome.runtime.reload();
将重新加载您的扩展(docs)。您还需要更改舱单。Json文件,添加:
...
"permissions": [ "management" , ...]
...
我正在使用快捷方式重新加载。我不想在保存文件时总是重新加载
所以我的方法是轻量级的,你可以保留重载函数
manifest.json
{
...
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": true
},
"commands": {
"Ctrl+M": {
"suggested_key": {
"default": "Ctrl+M",
"mac": "Command+M"
},
"description": "Ctrl+M."
}
},
...
}
src / bg /背景js。
chrome.commands.onCommand.addListener((shortcut) => {
console.log('lets reload');
console.log(shortcut);
if(shortcut.includes("+M")) {
chrome.runtime.reload();
}
})
现在在chrome浏览器中按Ctrl + M重新加载