移植 Chrome 扩展至 Opera

准备工作:

下载:firebuglite 源码

我下载的稳定版

解压源码,找到 firebug-lite/build/chrome-extension 目录,这就是 Chrome 的 firebug-lite 扩展啦。按照常理呢,Chrome 和 Opera 15+ 内核一致,扩展应该直接通用,结果一试,bug 百出啊,跑不起来……

我感觉原因可能是:

  1. Opera extension API 暂时没有 Chrome extension API 支持的多
  2. firebug-lite 的 Chrome 扩展开发的比较早,有些 API 已更新

下面记录移植过程的一些要点:

地址栏输入 opera:opera://extensions 或者 “Ctrl + Shift + E`”打开扩展页,右上角点击“开发者模式”;

点击“载入解压后的扩展…”,选择刚刚下载的 Chrome 扩展(firebug-lite/build/chrome-extension );

哈,第一个报错来了:

意思是说“manifest_version”值必须是 2 ,不能有引号,解释参见这里

扩展目录找到“manifest.json”文件,加入“"manifest_version": 2,”。

再加载扩展目录试试,扩展加进来了,可是又报错了……

manifest.json”文件里的“background_page”项替换成 "background": {"scripts": ["background.js"]}background.html 转换成 background.js 格式,删除没用的 <script> 标签。

点击“重新载入”试试,(⊙o⊙)哦,不报错啦?打开个网页测试一下,打开 Chrome devTools ,看看 console 吧:

果然不出所料,还是报错,好事是浏览器右上角出现“小虫子”啦,嚯嚯~~

有事问 Google ,找啊找,看到一篇帖子 ,很像我遇到的问题。

找到“contentScript.js”文件,把所有 “sendRequest()”替换成“sendMessage()”,所有“onRequest”替换成“onMessage”,原因是原来的 API 已过时,详细见文档

“重新载入”扩展再试,有报错,关键的 “firebug-lite.js”没加载成功,要命:

继续问谷哥,见到一篇帖子

在 “manifest.json”里增加:“"web_accessible_resources": ["firebug-lite.js"]”,大概意思是资源可以通过“opera-extension://[PACKAGE ID]/[PATH]”取到啦,详细见文档

再“重新载入”扩展试一试,激动啊…… “F12”Firebug 神奇的出现了,哈哈。

不过还是有错,一些小图标资源加载不出来……

坑爹的,找了半天原因,发现“firebug-lite.js”文件中,图标的目录有错误“chrome-extension://bmagokdooijbeehmkpknfglimnifench/skin/xp/sprite.png”。把乱码“bmagokdooijbeehmkpknfglimnifench”批量替换成你的扩展 ID 即可。

艾玛,眼泪哗哗的……经过不懈的折腾,终于看到 “firebug-lite”出现在 Opera 15 中了,哈哈哈(不会觉得我无聊吧……)。

正当狂喜之际,打包时遇到问题,JS 文件需要加载本地图片,需要用到扩展 ID(随机生成),本地测试好的扩展 ID 跟打包完的不一致,导致图片资源加载不出来。

content scripts 可以获取扩展 ID:

chrome.i18n.getMessage('@@extension_id');
chrome.runtime.id
获取相对路径: chrome.extension.getURL("")

我把动态获取的扩展 ID 存到 localStorage 里,然后在注入的其它 JS 可以调用这个扩展 ID 了,搞定收工。