資訊專欄INFORMATION COLUMN
摘要：之所以越來越好用，很大一部分原因歸功于功能豐富的插件對于忠實用戶來說，了解和開發(fā)一款適合自己的插件，確實是一件很的事情。
了解chrome 插件chrome 之所以越來越好用，很大一部分原因歸功于功能豐富的插件；對于chrome忠實用戶來說，了解和開發(fā)一款適合自己的chrome插件，確實是一件很cool的事情。
chrome 插件個人理解：就是一個html + js +css + image的一個web應(yīng)用；不同于普通的web應(yīng)用，chrome插件除了兼容普通的js，json，h5等api，還可以調(diào)用一些瀏覽器級別的api，例如收藏夾，歷史記錄等。
推薦兩個網(wǎng)站了解和入門
谷歌官方API：https://developer.chrome.com/extensions/getstarted
360的文檔：http://open.chrome.#/extension_dev/overview.html
一個簡單的demo，文件目錄如下
和普通的web文件沒有什么區(qū)別，簡單介紹下
html:存放html頁面
js :存放js
locales ：存放了一個多語言的兼容【可無】
image ：放了兩張圖片【初期圖標(biāo)】
manifest ：核心入口文件
寫一個manifestapi參考文檔 :http://open.chrome.#/extension_dev/manifest.html
直接上代碼：
{
"name": "hijack analyse plug",
"version": "0.0.1",
"manifest_version": 2,
// 簡單描述
"description": "chrome plug analyse and guard the http hijack",
"icons": {
"16": "image/icon16.png",
"48": "image/icon48.png"
},
// 選擇默認(rèn)語言
"default_locale": "en",
// 瀏覽器小圖表部分
"browser_action": {
"default_title": "反劫持",
"default_icon": "image/icon16.png",
"default_popup": "html/test.html"
},
// 引入一個腳本
"content_scripts": [
{
"js": ["script/test.js"],
// 在什么情況下使用該腳本
"matches": [
"http://*/*",
"https://*/*"
],
// 什么情況下運行【文檔加載開始】
"run_at": "document_start"
}
],
// 應(yīng)用協(xié)議頁面
"permissions": [
"http://*/*",
"https://*/*"
]
}
test.js 文件
/**
* @author: cuixiaohuan
* Date: 16/4/13
* Time: 下午8:41
*/
(function(){
/**
* just test for run by self
*/
console.log("begin");
})();
test.html 文件
just for test
test
運行插件
chrome 中輸入：chrome://extensions
選擇加載已解壓的插件-》選擇文件根目錄即可。
效果如下：
一個基本的插件變完成了，勾選已啟用，隨便打開一個網(wǎng)頁，會看到log中輸出如下
點擊頁面上面的小圖標(biāo)如下圖：
一個小的插件已經(jīng)完成，但是還有更多的api和有趣的事情可以去做。下面是360文檔中給出一些優(yōu)化建議，共勉。
確認(rèn) Browser actions 只使用在大多數(shù)網(wǎng)站都有功能需求的場景下。確認(rèn) Browser actions 沒有使用在少數(shù)網(wǎng)頁才有功能的場景， 此場景請使用page actions。
確認(rèn)你的圖標(biāo)尺寸盡量占滿19x19的像素空間。 Browser action 的圖標(biāo)應(yīng)該看起來比page action的圖標(biāo)更大更重。
盡量使用alpha通道并且柔滑你的圖標(biāo)邊緣，因為很多用戶使用themes，你的圖標(biāo)應(yīng)該在在各種背景下都表現(xiàn)不錯。不要不停的閃動你的圖標(biāo)，這很惹人反感。
【轉(zhuǎn)載請注明：【chrome 插件一】開發(fā)一個簡單chrome瀏覽器插件 | 靠譜崔小拽 】
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79210.html
摘要：本文作者原文地址前言瀏覽器無論是作為瀏覽器市場的還是其強(qiáng)大的跨平臺能力以及豐富的擴(kuò)展插件，一直是許多開發(fā)者的首要選擇的瀏覽器。瀏覽器也因為其豐富的插件，幫助開發(fā)者們在開發(fā)流程中極大地提高開發(fā)效率。 本文作者：TheBeauty原文地址:https://www.cnblogs.com/thebe... 前言 Chrome瀏覽器無論是作為瀏覽器市場的NO1還是其強(qiáng)大的跨平臺能力以及豐富的...
摘要：本文作者原文地址前言瀏覽器無論是作為瀏覽器市場的還是其強(qiáng)大的跨平臺能力以及豐富的擴(kuò)展插件，一直是許多開發(fā)者的首要選擇的瀏覽器。瀏覽器也因為其豐富的插件，幫助開發(fā)者們在開發(fā)流程中極大地提高開發(fā)效率。 本文作者：TheBeauty原文地址:https://www.cnblogs.com/thebe... 前言 Chrome瀏覽器無論是作為瀏覽器市場的NO1還是其強(qiáng)大的跨平臺能力以及豐富的...
摘要：配置文件每一個擴(kuò)展都有一個格式的文件，叫。此消息發(fā)送后會觸發(fā)擴(kuò)展內(nèi)每個頁面的事件。和持續(xù)長時間的保持會話需要在和擴(kuò)展建立一個長時間存在的通道。內(nèi)容腳本發(fā)送消息到擴(kuò)展程序建立通道，并給通道命名利用通道發(fā)送一條消息。 這次的練習(xí)是做一個Chrome的擴(kuò)展，分享一下入門開發(fā)過程。因為在消息傳遞那塊糾結(jié)了特別久，所以我會重點總結(jié)消息傳遞那塊。 這次做這個插件的功能很簡單，就是點擊按鈕后可以對當(dāng)...
摘要：提示插件可以重寫默認(rèn)的比如打開新時。這是在插件中定義的，因此不能后面做更改。把你的插件提交到的子版塊中。從圖中藍(lán)色點開始到后面的兩天曲線變化。曲線中間的那個小凸起，是二月份在發(fā)布的時候產(chǎn)生的。關(guān)于在插件中如何使用的教程在這里。 showImg(https://segmentfault.com/img/remote/1460000008971998?w=1920&h=1080); 本文...
摘要：相當(dāng)于發(fā)一個命令。這個函數(shù)能獲取到當(dāng)前標(biāo)簽的信息對象并傳遞給回調(diào)函數(shù)。向標(biāo)簽頁中的發(fā)送消息。接收到消息，執(zhí)行操作。會彈出一個控制臺。這樣我們就完成了一個簡單的插件。 最近突然覺得有些常用的功能可以寫成瀏覽器插件，就不用把代碼放到console控制臺運行了。只要點擊插件圖標(biāo)就可以自動運行。會方便很多。就去查了下chrome插件開發(fā)教程。本質(zhì)上講，chrome插件就是以一些特殊的方式運行一...
閱讀 1382·2021-11-22 15:25
閱讀 3390·2021-10-21 09:38
閱讀 1600·2021-10-19 13:21
閱讀 1025·2021-09-06 15:00
閱讀 1705·2019-08-30 15:44
閱讀 2613·2019-08-29 15:40
閱讀 3480·2019-08-29 13:44
閱讀 2090·2019-08-26 16:56
