background introduction
Half a year ago, I was fortunate enough to share the technical sharing of browser developer tools. At the end of the PPT, I always felt that the theoretical explanation was more than the code sharing, so I thought about writing related codes, and finally locked it after some hard thinking. In terms of the implementation of browser plug-in writing, so after going through a knowledge encyclopedia, I have slightly mastered a part of the theoretical knowledge. After a deep understanding, I realized a small plug-in, which can be regarded as a summary of technical knowledge, maybe it is For the sake of a reminder, or perhaps to enrich the content of the blog technical articles on this site, there is this article. This article focuses on code practice, directly on the code (too lazy to spend too much time).
manifest.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"
]
}
popup.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);Run the example
(plugin installation)
(plugin run)
example description
(1) The writing of chrome plug-ins generally has three interactive scenarios, namely, the small icon displayed on the toolbar, the pop-up box when the plug-in is activated (in this case, it is a pop-up frame when the plug-in is activated), the newly opened browser window, and the mouse Right click, etc.;
(2) The operation of the plug-in needs to customize the browser's operating permissions. In this example, the browser's voice reading plug-in is used (the voice broadcast is more powerful, and the amount, date, word, etc. will be automatically recognized), and the pop-up notification prompt box plug-in;
(3) When the plug-in is running, the main window of the plug-in will pop up. By default, the text of the year, month, day, hour, minute, and second of the current date will be displayed (you can modify the content of the text field at will), click the read button to read the text by voice, and the " The operation was executed successfully!" notification prompt;
(4) Plug-in source code download, you can directly decompress it and use the browser's developer mode to load and run it, click here to download " chrome-plugin-examples.zip ";
(5) The source code is relatively amateurish, and it is written using IDEA;
See personal blog: Learning to write a chrome plugin