基于原子能力的浏览器扩展程序开发

2023-07-19 61

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 扩展程序开发

原文合集地址如下，有需要的朋友可以关注

本文地址

合集地址

实现步骤

原子能力服务提供端

需提供标准的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文件，然后解压缩，浏览器加载解压后的文件夹即可