我想为我的chrome扩展重新加载每次我保存在扩展文件夹中的文件,而不必显式点击“重新加载”在chrome://extensions/。这可能吗?

编辑:我知道我可以更新Chrome重新加载扩展的间隔,这是一个中途的解决方案,但我宁愿让我的编辑器(emacs或textmate)触发保存重新加载或要求Chrome监控目录的变化。


当前回答

我主要在Firefox中开发,其中web-ext运行会在文件更改后自动重新加载扩展。一旦准备就绪,我会在Chrome中进行最后一轮测试,以确保没有Firefox中没有出现的任何问题。

如果你想主要在Chrome上开发,并且不想安装任何第三方扩展,那么另一个选择是在扩展的文件夹中创建一个test.html文件,并添加一堆SSCCE。然后,该文件使用一个正常的<script>标记来注入扩展脚本。

您可以使用它进行95%的测试,然后当您想在现场测试它时手动重新加载扩展。

这并不能完全重现扩展所运行的环境,但对于许多简单的事情来说已经足够好了。

其他回答

是的,你可以间接地做!这是我的解决方案。

在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);
})();

注入的脚本可以从任何位置注入其他脚本。

这种技术的另一个好处是你可以忽略孤立世界的限制。参见内容脚本执行环境

这正是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

如果你使用webpack开发,有一个自动重载插件: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');

plugins: [
    new ChromeExtensionReloader()
]

如果你不想修改webpack.config.js,还附带一个CLI工具:

npx wcer

注意:一个(空的)后台脚本是必需的,即使你不需要它,因为它是注入重载代码的地方。

如果你有一台Mac,最简单的方法就是使用Alfred App!

只需使用Powerpack获取Alfred App,然后添加下面链接中提供的工作流,并自定义你想要的热键(我喜欢使用⌘+ + R)。

现在,每次你使用热键,谷歌Chrome浏览器将重新加载,无论你在那个时刻的应用程序。

如果你想使用其他浏览器,打开AppleScript在阿尔弗雷德首选工作流程和替换“谷歌Chrome”与“Firefox”,“Safari”,…

我还将在这里显示在ReloadChrome中使用的/usr/bin/osascript脚本的内容。Alfredworkflow文件,这样你就可以看到它在做什么。

tell application "Google Chrome"
  activate
  delay 0.5
  tell application "System Events" to keystroke "r" using command down
  delay 0.5
  tell application "System Events" to keystroke tab using command down
end tell

工作流文件为ReloadChrome.alfredworkflow。

苹果只

使用扩展Reloader:

使用打印稿

将你的观察者添加到你的项目中:yarn Add tsc-watch 向package.json添加脚本命令

...
  "scripts": {
    "dev": "tsc-watch --onSuccess \"open -a '/Applications/Google Chrome.app' 'http://reload.extensions'\""
  },
...

运行脚本yarn dev

使用JavaScript

将你的watcher添加到你的项目中:yarn Add watch-cli 向package.json添加脚本命令

...
  "scripts": {
    "dev": "watch -p \"**/*.js\" -c \"open -a '/Applications/Google Chrome.app' 'http://reload.extensions'\""
  },
...

运行脚本yarn dev

额外的好处:在Extensions Reloader选项中打开“reload current tab”,这样它就会在做出更改后重新加载: