プラグイン機能
Web ページ内のキーワードを強調表示する
プロジェクト構造
$ 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
コードの説明
- マニフェスト.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>
ブラウザの主要な API を使用する、popup/popup.js プラグイン ロジック。その他の詳細については、ソース コードを参照してください。
# 数据持久化
chrome.storage.sync.get();
chrome.storage.sync.set();
# 查询浏览器 Tab 标签页，并回调相关函数
chrome.tabs.query();
# 向指定 Tab 标签页发布消息（用于插件与网页进行通信）
chrome.tabs.sendMessage();
-
Popup/popup.css プラグインのスタイル
-
content/content.js は Web ページに挿入されるロジックで、
ブラウザの主要な API を使用します。その他の詳細についてはソース コードを参照してください。
# 监听插件发布过来的消息
chrome.runtime.onMessage.addListener()
- content/content.css は Web ページに挿入されるスタイルです
インストールと試運転
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插件(扩展)开发全攻略