关键词高亮显示浏览器 Edge 插件开发 & 源码

插件功能

将网页中的关键词高亮显示

项目结构

$ tree
.
|-- content # 注入到网页中的 js 与 css
|   |-- content.css
|   `-- content.js
|-- icons # 插件用到的图标
|   |-- icon128.png
|   |-- icon16.png
|   |-- icon32.png
|   `-- icon48.png
|-- manifest.json # 插件核心配置文件
`-- popup # 插件显示页与 js/css
    |-- popup.css
    |-- popup.html
    `-- popup.js

3 directories, 10 files

代码讲解

manifest.json

{
    
    
  "name": "关键词高亮",
  "version": "1.0",
  "description": "添加关键词可使页面中的关键词高亮显示",
  "manifest_version": 3,
  "default_title": "关键词高亮",
  "permissions": [ # 插件用到的权限
    "activeTab",
    "storage"
  ],
  "icons": {
    
     # 插件的图标（非必需）
    "16": "/icons/icon16.png",
    "32": "/icons/icon32.png",
    "48": "/icons/icon48.png",
    "128": "/icons/icon128.png"
  },
  "content_scripts": [
    {
    
    
      "matches": ["<all_urls>"],  # 匹配哪些网页地址（这里为所有）
      "js": ["/content/content.js"], # 对网页注入的 js 脚本
      "css": ["/content/content.css"] # 对网页注入的 css 样式
    }
  ],
  "action": {
    
    
    "default_popup": "/popup/popup.html" # 插件的显示页
  }
}

popup/popup.html 插件的页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/popup/popup.css">
    </head>
    <body>
        <h1>关键词高亮</h1>
        <p>输入关键词:</p>

        <input type="text" id="keywordInput">
        <button id="addButton">添加</button>
        <ul id="keywordList"></ul>

        <script src="/popup/popup.js"></script>
    </body>
</html>

popup/popup.js 插件逻辑
其中用到了浏览器关键 API，其它详见源码

  # 数据持久化
  chrome.storage.sync.get();
  chrome.storage.sync.set();

  # 查询浏览器 Tab 标签页，并回调相关函数
  chrome.tabs.query();
  # 向指定 Tab 标签页发布消息（用于插件与网页进行通信）
  chrome.tabs.sendMessage();

popup/popup.css 插件的样式
content/content.js 注入到网页的逻辑
其中用到了浏览器关键 API，其它详见源码

  # 监听插件发布过来的消息
  chrome.runtime.onMessage.addListener()

content/content.css 注入到网页的样式

安装与调试

1）点管理扩展 => 加载解压缩的扩展

2）选择插件的文件夹
选择文件夹
3）如果改动了代码，点重新加载
在这里插入图片描述

源码

https://github.com/xchenhao/ext-highlight-keyword

插件发布

1）开发完成后，打包成 zip 格式
2）注册 Miscrosoft Edge 开发者
3）上传发布，等待审核通过
4）审核通过后其它人即可安装，例文本的插件
https://microsoftedge.microsoft.com/addons/detail/mmaknoipfnllpniiacccjpohngpnfefe

参考

https://learn.microsoft.com/zh-cn/microsoft-edge/extensions-chromium/ Microsoft Edge 扩展概述
https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html 【干货】Chrome插件(扩展)开发全攻略