Keyword highlight browser Edge plug-in development & source code

plug-in function

Highlight keywords in web pages

project structure

$ 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

code explanation

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 plugin's page

<!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 plug-in logic
which uses the key API of the browser, see the source code for other details

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

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

popup/popup.css Styles for the plugin
content/content.js is the logic injected into the web page,
which uses the key API of the browser, and see the source code for other details

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

content/content.css is the style injected into the web page

Installation and commissioning

1) Click Manage Extensions => Load the unzipped extension
Load the unpacked extension
2) Select the folder of the plugin
select folder
3) If you change the code, click Reload
insert image description here

source code

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

plug-in release

1) After the development is completed, package it into a zip format
2) Register as a Miscrosoft Edge developer
3) Upload and publish, wait for the review to pass
4) After the review is passed, others can install it, such as the plug-in
https://microsoftedge.microsoft.com/ addons/detail/mmaknoipfnllpniiacccjpohngpnfefe

reference

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