背景紹介
半年前、幸運にもブラウザ開発者ツールの技術共有を共有する機会に恵まれましたが、そのときの PPT の最後では、コード共有よりも理論的な説明が重要であると常に感じていたため、関連する内容を書こうと考えていました。ブラウザのプラグイン作成の実装に関しては、知識事典を読んで、理論的な知識の一部を少し習得しました。深く理解した後、私は次のことに気づきました。技術的な知識の要約と見なすことができる小さなプラグインですが、おそらくそれは覚えておくため、またはおそらくこのサイトのブログの技術記事の内容を充実させるために、この記事があります。この記事は、コードを直接練習することに焦点を当てています (あまりにも時間がかかるのが面倒です)。
マニフェスト.json
{
"name": "渣渣插件",
"version": "1.0.0",
"manifest_version": 2,
"description": "这是一款比较简单的插件示例。",
"browser_action": {
"default_icon": "statics/images/logo.png" ,
"default_title": "渣渣插件",
"default_popup": "templates/popup.html"
},
// 注册打开快捷键
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+X"
},
"description": "Opens popup.html"
}
},
// 权限
"permissions": [
"tts",
"notifications"
]
}
ポップアップ.js
/**
* @author chendd
*/
;(function (w) {
w.onload = function () {
{
var date = new Date().toLocaleString();
//FIXME 智能语音，可区分日期和金额等数字
var content = "今天是" + date + "，距离新的一年还有剩余 " + getDaysRemaining() + " 天！";
document.getElementById("content_text_id").value = content;
}
document.getElementById("example_btn_id").addEventListener("click" , function (ev) {
// rate配置项可以修改语音朗读速度，1为正常速度
var content = document.getElementById("content_text_id").value;
chrome.tts.speak(content, {
rate: 0.8,
onEvent: function(event) {
if(event.type !== 'end') {
return;
}
chrome.notifications.create("saveSuccess", {
type: "basic",
iconUrl: "../statics/images/logo.png",
title: "提示",
message: "操作执行成功！"
});
}
});
} , true);
};
/**
* 计算今年剩余天数
* 实现方案一：利用本年最后一天的时分秒 - 当前日期的时分秒 = 剩下的时分秒毫秒，再除以一天24小时的时分秒
* 实现方案二：计算今天是今年的第几天，再根据平年和闰年计算剩余天数
* 实现方案三：根据实际的年月日自行累加计算，最为准确
* @returns {number}
*/
function getDaysRemaining() {
// 今天的标准时间
var today = new Date();
// 本年最后标准时间
var endYear = new Date(today.getFullYear() + 1, 0, 1, 0, 0, 0);
// 一天的毫秒数
var ms = 24 * 60 * 60 * 1000;
// 计算剩余毫秒除以一天的毫秒数，就是天数
return Math.round((endYear.getTime() - today.getTime()) / ms);
}
})(window);サンプルを実行する
(プラグインのインストール)
(プラグインの実行)
説明例
(1) Chrome プラグインの作成には、一般に 3 つのインタラクティブなシナリオがあります。つまり、ツールバーに表示される小さなアイコン、プラグインがアクティブ化されたときのポップアップ ボックス (この場合はポップアップ フレーム)プラグインがアクティブ化されているとき)、新しく開いたブラウザ ウィンドウ、マウスの右クリックなど。
(2) プラグインの動作にはブラウザの動作権限をカスタマイズする必要がありますが、この例ではブラウザの音声読み上げプラグインを使用しています（音声ブロードキャストの方が強力で、金額、日付、単語などが読み上げられます）。自動的に認識されます）、およびポップアップ通知プロンプト ボックス プラグイン。
(3) プラグインを実行すると、プラグインのメインウィンドウが表示され、デフォルトでは現在の日付の年、月、日、時、分、秒のテキストが表示されます（テキスト フィールドの内容は自由に変更できます)、読み取りボタンをクリックしてテキストを音声で読み上げると、「操作は正常に実行されました!」という通知プロンプトが表示されます。
(4) プラグインのソース コードをダウンロードすると、直接解凍し、ブラウザの開発者モードを使用してロードして実行できます。ここをクリックして「chrome-plugin-examples.zip」をダウンロードします。
(5) ソース コードは比較的素人っぽく、IDEA を使用して書かれています。
個人のブログを参照してください: Chrome プラグインの作成方法を学習する