我想为我的chrome扩展重新加载每次我保存在扩展文件夹中的文件,而不必显式点击“重新加载”在chrome://extensions/。这可能吗?
编辑:我知道我可以更新Chrome重新加载扩展的间隔,这是一个中途的解决方案,但我宁愿让我的编辑器(emacs或textmate)触发保存重新加载或要求Chrome监控目录的变化。
我想为我的chrome扩展重新加载每次我保存在扩展文件夹中的文件,而不必显式点击“重新加载”在chrome://extensions/。这可能吗?
编辑:我知道我可以更新Chrome重新加载扩展的间隔,这是一个中途的解决方案,但我宁愿让我的编辑器(emacs或textmate)触发保存重新加载或要求Chrome监控目录的变化。
当前回答
更新:我已经添加了一个选项页面,这样你就不必手动查找和编辑扩展的ID了。CRX和源代码在:https://github.com/Rob--W/Chrome-Extension-Reloader 更新2:添加快捷方式(见我的仓库在Github)。 包含基本功能的原始代码如下所示。
创建一个扩展,并使用Browser Action方法与chrome.extension.management API一起重新加载已解包的扩展。
下面的代码为Chrome添加了一个按钮,点击后将重新加载扩展。
manifest.json
{
"name": "Chrome Extension Reloader",
"version": "1.0",
"manifest_version": 2,
"background": {"scripts": ["bg.js"] },
"browser_action": {
"default_icon": "icon48.png",
"default_title": "Reload extension"
},
"permissions": ["management"]
}
bg.js
var id = "<extension_id here>";
function reloadExtension(id) {
chrome.management.setEnabled(id, false, function() {
chrome.management.setEnabled(id, true);
});
}
chrome.browserAction.onClicked.addListener(function(tab) {
reloadExtension(id);
});
icon48.png:选择一个漂亮的48x48图标,例如:
其他回答
是的,你可以间接地做!这是我的解决方案。
在manifest.json
{
"name": "",
"version": "1.0.0",
"description": "",
"content_scripts":[{
"run_at":"document_end",
"matches":["http://*/*"],
"js":["/scripts/inject.js"]
}]
}
在inject.js
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'Your_Scripts';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
})();
注入的脚本可以从任何位置注入其他脚本。
这种技术的另一个好处是你可以忽略孤立世界的限制。参见内容脚本执行环境
我主要在Firefox中开发,其中web-ext运行会在文件更改后自动重新加载扩展。一旦准备就绪,我会在Chrome中进行最后一轮测试,以确保没有Firefox中没有出现的任何问题。
如果你想主要在Chrome上开发,并且不想安装任何第三方扩展,那么另一个选择是在扩展的文件夹中创建一个test.html文件,并添加一堆SSCCE。然后,该文件使用一个正常的<script>标记来注入扩展脚本。
您可以使用它进行95%的测试,然后当您想在现场测试它时手动重新加载扩展。
这并不能完全重现扩展所运行的环境,但对于许多简单的事情来说已经足够好了。
也许我有点晚了,但我已经通过创建https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln解决了这个问题
它通过重新加载chrome://extensions页面,每当文件。变更事件是通过websocket传入的。
一个基于gulp的如何发出文件的示例。扩展文件夹中的文件更改时的更改事件可以在这里找到:https://github.com/robin-drexler/chrome-extension-auto-reload-watcher
为什么要重新加载整个标签,而不是仅仅使用扩展管理api来重新加载/重新启用扩展?目前禁用和启用扩展会再次导致任何打开的检查窗口(控制台日志等)关闭,我发现在活动开发期间这太烦人了。
在任何场合或事件中
chrome.runtime.reload();
将重新加载您的扩展(docs)。您还需要更改舱单。Json文件,添加:
...
"permissions": [ "management" , ...]
...
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服务器