原文合集地址如下,有需要的朋友可以关注
实现步骤
原子能力服务提供端
需提供标准的HTTP或HTTPS协议的服务
浏览器安全策略
由于浏览器安全策略如对SSL证书的要求和同源策略的影响,直接提供的原子能力或许不具有能够供给浏览器使用的要求,此时需要一个代理来实现这些功能。后期也可以实现一个专用的API网关,现目前使用nginx伺服器实现。
同源策略
浏览器同源策略的表现为,在发起任意请求以前,会首先发起一个options请求来校验服务是否能跨域调用,所以需要ngixn配置拦截options的请求,并加入可跨域调用的响应头
if ($request_method = OPTIONS) {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type';
add_header 'Access-Control-Max-Age' 1728000;
return 204;
}
SSL安全策略
当扩展程序需要在本身在https的网站环境中调用我们提供的接口,浏览器要求我们也需要提供https的服务,同时要求服务以域名形式访问。
网络环境1
使用阿里云、腾讯云等厂商,需要在厂商本身购买域名,并对域名进行ICP备案,然后在本厂商购买服务器,然后在厂商自己这里购买域名的证书
网络环境2
使用亚马逊云、GoDaddy等厂商,则不需要进行ICP备案,在厂商这里下载到免费的证书即可
然后进行类似于下面的nginx配置
server {
listen 443 ssl;
server_name <yourdomain>;
ssl_certificate cert/<cert-file-name>.pem;
ssl_certificate_key cert/<cert-file-name>.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
root html;
index index.html index.htm;
}
}
代理配置
在解决了浏览器的安全策略之后,我们就可以得出最终的nginx配置。
server {
listen 443 ssl;
server_name <yourdomain>;
ssl_certificate cert/<cert-file-name>.pem;
ssl_certificate_key cert/<cert-file-name>.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
if ($request_method = OPTIONS) {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Content-Type';
add_header 'Access-Control-Max-Age' 1728000;
return 204;
}
proxy_pass http://127.0.0.1:18012;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_intercept_errors on;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' '*';
add_header 'Access-Control-Allow-Headers' '*';
}
}
扩展程序实现端
扩展程序使用html/css/js技术栈实现即可,主要包括以下几个部分的功能开发
背景页
扩展程序的背景页(Background Page)是一个长时间运行的页面,用于处理扩展的核心逻辑、监听事件和执行后台任务。它在扩展安装后自动创建,并在整个扩展生命周期中保持打开状态。
在扩展程序中,可以通过在清单文件(manifest.json)中指定"background"
字段来定义背景页。背景页可以是一个单独的 HTML 文件,或者是一个包含脚本逻辑的 JavaScript 文件。
示例清单文件中指定背景页为background.html
:
{
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
"background": {
"page": "background.html"
},
"permissions": [
"contextMenus"
],
"browser_action": {
"default_popup": "popup.html"
},
"icons": {
"16": "icon.png"
}
}
在上述示例中,background.html
被指定为扩展的背景页,它将负责处理事件和后台任务。你可以根据实际需求编写背景页的 HTML 和 JavaScript 代码来实现所需的功能。
右键菜单
扩展程序实现右键菜单可以提供以下主要功能:
-
创建菜单项:你可以使用
chrome.contextMenus.create()
方法创建自定义的菜单项,并指定菜单项的标题、图标、上下文(在何种情况下显示菜单项)等属性。 -
上下文条件:通过指定上下文条件,你可以控制在何种情况下显示菜单项。例如,你可以选择在选中文本时显示菜单项,或者只在特定类型的页面上下文中显示菜单项。
-
点击事件处理:通过为菜单项的
onclick
属性指定一个事件处理函数,你可以定义用户点击菜单项时的操作。在事件处理函数中,你可以获取用户选中的文本、当前标签页信息等,并执行相应的逻辑。 -
动态更新菜单项:你可以根据需要动态更新右键菜单,添加、移除或修改菜单项。这可以帮助你根据不同的场景或条件显示不同的菜单项。
-
子菜单:除了创建顶级菜单项外,你还可以创建具有层级关系的子菜单项。通过指定父菜单项的
parentId
属性,你可以将菜单项组织为多级菜单结构。 -
权限控制:为了创建右键菜单,你需要在扩展程序的清单文件中声明
"contextMenus"
权限。这样可以确保扩展程序有权限创建和操作右键菜单。
以上功能提供了灵活的方式来扩展和定制浏览器的右键菜单,使用户能够在特定上下文中执行自定义的操作。可以根据需求设计和实现特定的右键菜单功能,提升用户体验和扩展程序的功能性。
对当前页面进行操作
扩展程序可以对当前页面进行以下操作:
-
获取当前页面的信息:可以使用
chrome.tabs
API 获取当前活动标签页的信息,如 URL、标题、图标等。通过这些信息,你可以根据需要执行相应的操作。 -
修改当前页面的内容:可以使用
chrome.tabs
API 或chrome.scripting
API 修改当前页面的 DOM 结构、样式、内容等。这使得你可以根据用户需求进行页面定制、内容修改或注入自定义脚本。 -
与当前页面进行通信:使用
chrome.tabs
API 可以与当前页面进行通信。可以向页面发送消息,并在页面上注入内容或执行特定操作。页面也可以通过消息响应机制与扩展程序进行交互。 -
操作当前页面的存储:使用
chrome.storage
API 可以读取或修改当前页面的本地存储或会话存储。这允许页面间共享数据或保存特定页面的状态。 -
发送网络请求:使用
chrome.tabs
API 可以向当前页面发送网络请求,并获取页面返回的内容。这使得可以实现页面内容的自动加载、数据提取、页面截图等功能。 -
注册事件监听器:通过
chrome.tabs
API 可以注册事件监听器,监听当前页面的状态变化、页面加载完成、标签切换等事件。这使得你可以在特定事件发生时执行相应的操作。
以上是扩展程序可以对当前页面进行的一些常见操作。扩展程序提供了丰富的 API 和功能,使开发者能够与当前页面进行交互,并根据需要对页面进行修改、通信、存储和网络操作等。
使用扩展程序
打包成crx之后,传输给使用者,然后使用者将crx改成rar文件,然后解压缩,浏览器加载解压后的文件夹即可
标签:浏览器,header,程序开发,扩展,原子,Access,ssl,菜单项,页面 From: https://www.cnblogs.com/chaojilaji/p/17494404.html