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

插件功能

将网页中的关键词高亮显示
关键词高亮显示浏览器 Edge 插件开发 & 源码_第1张图片

项目结构

$ 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": [""],  # 匹配哪些网页地址(这里为所有)
      "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>

关键词高亮显示浏览器 Edge 插件开发 & 源码_第2张图片

  • 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)点管理扩展 => 加载解压缩的扩展
关键词高亮显示浏览器 Edge 插件开发 & 源码_第3张图片
2)选择插件的文件夹
关键词高亮显示浏览器 Edge 插件开发 & 源码_第4张图片
3)如果改动了代码,点重新加载
关键词高亮显示浏览器 Edge 插件开发 & 源码_第5张图片

源码

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插件(扩展)开发全攻略

你可能感兴趣的:(开发,edge,插件,chrome,浏览器,javascript)