关于火狐浏览器如何使用的一点实践经验

[nekolr]

前提：需要有火狐的附加组件（扩展）开发者帐号

1. 克隆项目，搜索所有使用 chrome 组件的代码，比如 storage_set，showBadge 方法等，删掉它们。
2. 来到 extension 目录，参考该目录下的 README 文件进行 build
3. 生成的构件在 build 目录下，对该目录下的文件进行打包
4. 到火狐的附加组件开发者中心提交一个新的附加组件，选择自己托管，选择刚才打包好的文件上传，然后可以选择不上传源代码，等待审核通过
5. 审核通过后点击版本号，可以看到一个签名过的 xpi 文件，点击即可下载使用

为什么要删掉这些代码，我一开始也是直接从 step2 执行的，但是插件点击测试和同步没有反应，所以我在管理附件中选择调试它，可以看到控制台里有一些报错，这些报错就是上面删掉的代码，是它们影响了代码的执行。

[fenglbl]

提交前修改以下几点 1.打包前将function.js文件中的 chrome 替换成 browser（火狐中用的是browser对象，例如chrome .storage.local.get改成browser.storage.local.get） 2.打包后CookieCloud\extension\build\chrome-mv3-prod\manifest.json文件中改三点， 一、添加扩展id，跟background同级 二、background的值改成{"scripts":["background..js"]}，其中background..js改成打包后你自己文件的名字 三、在background同级添加"browser_action":{"default_popup":"popup.html"} 最后打包CookieCloud\extension\build\中所以文件打包成.zip提交审核

【注意：测试多次，服务端地址必须要https，火狐扩展有CSP策略，http好像请求不通】

懒得打包的可以邮件联系：[email protected]直接发包

添加剂扩展id

"browser_specific_settings": {
    "gecko": {
	  "id": "自己的扩展id",
	  "strict_min_version": "58.0"
    }
}

manifest.json文件

{
	"icons": {
		"16": "icon16.plasmo.00ac8b83.png",
		"32": "icon32.plasmo.9ad0c5b6.png",
		"48": "icon48.plasmo.cae3a6b3.png",
		"64": "icon64.plasmo.e4b604fc.png",
		"128": "icon128.plasmo.b89b7dfa.png"
	},
	"manifest_version": 3,
	"action": {
		"default_icon": {
			"16": "icon16.plasmo.00ac8b83.png",
			"32": "icon32.plasmo.9ad0c5b6.png",
			"48": "icon48.plasmo.cae3a6b3.png",
			"64": "icon64.plasmo.e4b604fc.png",
			"128": "icon128.plasmo.b89b7dfa.png"
		},
		"default_popup": "popup.html"
	},
	"version": "0.2.6",
	"author": "[email protected]",
	"name": "__MSG_appTitle__",
	"description": "__MSG_appDesc__",
	"permissions": ["cookies", "tabs", "storage", "alarms", "unlimitedStorage"],
	"background": {
		"scripts": ["background.5fadff2f.js"]
	},
	"browser_action": {
		"default_popup": "popup.html"
	},
	"browser_specific_settings": {
		"gecko": {
			"id": "自己的扩展id",
			"strict_min_version": "58.0"
		}
	},
	"content_scripts": [{
		"matches": ["<all_urls>"],
		"js": ["content.62a5b9ec.js"],
		"css": []
	}],
	"default_locale": "zh_CN",
	"host_permissions": ["<all_urls>"]
}

[bupt2017]

所以文件打包成.zip提交审核

第一步：clone 第二步：按照您说的第1点将所有chrome替换为firefox 第三步：进入extension目录并执行npm run build，然后报错 root@eiphie3bud:~/CookieCloud# cd extension/ root@eiphie3bud:~/CookieCloud/extension# npm run build

[email protected] build plasmo build

🟣 Plasmo v0.89.4 🔴 The Browser Extension Framework 🔵 INFO | Prepare to bundle the extension... 🔵 INFO | Building for target: chrome-mv3 🔵 INFO | Loaded environment variables from: [] 🔴 ERROR | Failed to resolve '../../popup.tsx' from './.plasmo/static/popup.tsx'

[fenglbl]

打包前有安装包吗

npm i

[bupt2017]

打包前有安装包吗

npm i

执行完这个命令可以了。 作为小白十分感谢大佬

[wanglongbiao]

点手动同步的时候报错了： error TypeError: Ut(...).action is undefined jr moz-extension://c92f8d06-c0f5-468c-91b4-5035fa4db599/background.806a2724.js:48 ja moz-extension://c92f8d06-c0f5-468c-91b4-5035fa4db599/background.806a2724.js:48 dc moz-extension://c92f8d06-c0f5-468c-91b4-5035fa4db599/background.806a2724.js:48 moz-extension://c92f8d06-c0f5-468c-91b4-5035fa4db599/background.806a2724.js:48

点进去 js 文件是：

function jr(e, E = 'red', i = 5000) {
  Ut(zt).action.setBadgeText({
    text: e
  }),
  Ut(zt).action.setBadgeBackgroundColor({
    color: E
  }),
  setTimeout(() => {
    Ut(zt).action.setBadgeText({
      text: ''
    })
  }, i)
}

应该是火狐移除了 browser 对象导致的。