我的第一个浏览器插件网页一键上传的开发历史-编程知识

前言

一键上传选中的网页内容，实现知识快速收藏。如飞书剪存，有道云剪报，MrDoc速记。早在2008年，我参考了有道云一键上传，实现了一个简单的浏览器插件，能方便保存网页内容到个人网站。这些插件目前都很难兼容全部的浏览器，Chrome支持好一些。

时移势迁，光阴荏苒，这一小插件已经使用了十多年。之前作为网页书签存在，现在已经变成浏览器插件了。但之前的插件版本只支持Chrome和Opera，不支持firefox，而我平常用Chrome访问国外站点，firefox访问国内站点和个人开发网站。所以近期终于得闲开发了firefox版本。

在这里插入图片描述
个人使用，所以也没美化。

实现原理

调用window.getSelection()获得选中的网页内容，然后发给popup脚本，再在popup里调用fetch()函数上传数据。

网页剪报功能简述

以飞书剪存为例，它是一个兼容于各大浏览器的扩展程序。它可以将网页正文保存至飞书文档，且自动剥离广告。
一键保存网页正文，告别手动复制粘贴：浏览到喜欢的网页，点击飞书剪存，即可将网页内容保存至你的飞书文档中。
智能剥离网页广告，告别无用干扰信息：飞书剪存可以智能识别并去除悬浮或嵌在网页中的广告，还你干净、无噪的网页内容。

插件定义

v2插件定义

这个是飞书的：

{"name": "__MSG_appName__","description": "__MSG_CreationDoc_Operation_AppStoreBrief__","version": "1.0.26","manifest_version": 2,"default_locale": "zh_CN","browser_action": {"default_icon": {"16": "assets/icons/48.png","24": "assets/icons/48.png","32": "assets/icons/48.png"},"default_title": "__MSG_appName__"},"icons": {"16": "assets/icons/48.png","32": "assets/icons/48.png","48": "assets/icons/48.png","128": "assets/icons/128.png"},"background": {"persistent": false,"scripts": ["background.js"]},"content_scripts": [{"matches": ["http://*/*","https://*/*"],"run_at": "document_idle","js": ["content.js"]}],"permissions": ["tabs","activeTab","contextMenus","cookies","storage","*://*/*"],"web_accessible_resources": ["assets/*","app.html","app.js","page-post-frame-id.html","page-post-frame-id.js"],"incognito": "not_allowed","content_security_policy": "script-src 'self' 'unsafe-eval' https://*.bytegoofy.com blob:  https://*.ibytedapm.com ; object-src 'self'","homepage_url": "https://www.feishu.cn/hc/zh-CN/articles/606278856233"
}

v3版本的插件定义

{"manifest_version": 3,"name": "CMS一键上传8.0","version": "8.0","homepage_url": "http://www.icodelib.cn","background": {"scripts": ["background.js"]},"content_scripts": [{"matches": ["<all_urls>"],"js": ["jquery-1.8.3.js","content-script.js", "inject.js"]}],// 浏览器右上角图标设置，browser_action、page_action、app必须三选一"action": {"default_title": "一键上传","default_popup": "popup.html","default_icon": {"16": "icons/16x16.png","48": "icons/48x48.png","128": "icons/128x128.png"}},"host_permissions": ["<all_urls>"],"web_accessible_resources": [{"resources": ["inject.js", "popup.js"], "matches": ["<all_urls>"]}],"permissions":["contextMenus", // 右键菜单"tabs", // 标签"activeTab","scripting","notifications", // 通知"webRequest", // web请求"webRequestBlocking","webNavigation","declarativeNetRequestWithHostAccess","declarativeNetRequest","declarativeNetRequestFeedback","storage"]
//    "content_security_policy": "script-src 'self' 'unsafe-eval'"
}

实现

在content-script里获得选中内容，然后发送:

// 发送消息给后台
async function sendMessageToBackground(html) {try {       await browser.runtime.sendMessage({src: window.location.href,title: document.title,content: html})// showMsg('上传完成')} catch (err) {console.error(err);// showMsg('上传失败')}}

在popup.js里监听消息，然后获得数据后，调用后端API:

browser.runtime.onMessage.addListener(async (message, sender, sendResponse) => {	const formData = new FormData();formData.append('src', message.src);formData.append('title', message.title);formData.append('content', message.content);try {const response = await fetch(target_site, {method: 'POST',mode: "cors",body: formData,})const result = await response.json();debug(result)} catch (err) {debug(err)}// sendResponse({success: 'ok'})return true;
});

火狐需要用户选择接受外部访问

const permissions = {// This origin is listed in host_permissions:origins: ["<all_urls>"],
};const checkbox_host_permission = document.getElementById("checkbox_host_permission");
checkbox_host_permission.onchange = async () => {if (checkbox_host_permission.checked) {let granted = await browser.permissions.request(permissions);if (!granted) {// Permission request was denied by the user.checkbox_host_permission.checked = false;}} else {try {await browser.permissions.remove(permissions);} catch (e) {// While Chrome allows granting of host_permissions that have manually// been revoked by the user, it fails when revoking them, with// "Error: You cannot remove required permissions."console.error(e);checkbox_host_permission.checked = true;}}
};
browser.permissions.contains(permissions).then(granted => {checkbox_host_permission.checked = granted;
});

发布

对于Firefox而言，插件开发完后，需要上传到https://addons.mozilla.org/签名才能安装。
在这里插入图片描述
无品牌的firefox构建版本可以安装不用签名的插件。在about:config里将xpinstall.signatures.required设为false即可。此方法能装上，但功能有点问题，所以我还是选择了正式途径。

注意事项

后端API需要使用https
当使用manifest_version: 3时，fetch()函数会报错，TypeError: NetworkError when attacking to fetch resource，网上查了半天，发现v2和v3的诸多不同，且Content Security Policy (CSP) 的限制，需要以https或wss协议访问外部才行。
firefox需要插件有一个addon ID