亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

【chrome 插件一】開發(fā)一個(gè)簡(jiǎn)單chrome瀏覽器插件

MiracleWong / 1972人閱讀

摘要：之所以越來越好用，很大一部分原因歸功于功能豐富的插件對(duì)于忠實(shí)用戶來說，了解和開發(fā)一款適合自己的插件，確實(shí)是一件很的事情。

chrome 之所以越來越好用，很大一部分原因歸功于功能豐富的插件；對(duì)于chrome忠實(shí)用戶來說，了解和開發(fā)一款適合自己的chrome插件，確實(shí)是一件很cool的事情。
了解chrome 插件

chrome 插件個(gè)人理解：就是一個(gè)html + js +css + image的一個(gè)web應(yīng)用；不同于普通的web應(yīng)用，chrome插件除了兼容普通的js，json，h5等api，還可以調(diào)用一些瀏覽器級(jí)別的api，例如收藏夾，歷史記錄等。

推薦兩個(gè)網(wǎng)站了解和入門
谷歌官方API：https://developer.chrome.com/extensions/getstarted
360的文檔：http://open.chrome.#/extension_dev/overview.html

開始寫第一個(gè)插件 文件結(jié)構(gòu)

一個(gè)簡(jiǎn)單的demo，文件目錄如下

和普通的web文件沒有什么區(qū)別，簡(jiǎn)單介紹下

html:存放html頁面

js :存放js

locales ：存放了一個(gè)多語言的兼容【可無】

image ：放了兩張圖片【初期圖標(biāo)】

manifest ：核心入口文件

寫一個(gè)manifest

api參考文檔 :http://open.chrome.#/extension_dev/manifest.html

直接上代碼：

{
  "name": "hijack analyse plug",
  "version": "0.0.1",
  "manifest_version": 2,

  // 簡(jiǎn)單描述
  "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"
  },

  // 引入一個(gè)腳本
  "content_scripts": [
    {
      "js": ["script/test.js"],
      // 在什么情況下使用該腳本
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      // 什么情況下運(yùn)行【文檔加載開始】
      "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
運(yùn)行插件

chrome 中輸入：chrome://extensions
選擇加載已解壓的插件-》選擇文件根目錄即可。
效果如下：


一個(gè)基本的插件變完成了，勾選已啟用，隨便打開一個(gè)網(wǎng)頁，會(huì)看到log中輸出如下

點(diǎn)擊頁面上面的小圖標(biāo)如下圖：

優(yōu)化建議

一個(gè)小的插件已經(jīng)完成，但是還有更多的api和有趣的事情可以去做。下面是360文檔中給出一些優(yōu)化建議，共勉。

確認(rèn) Browser actions 只使用在大多數(shù)網(wǎng)站都有功能需求的場(chǎng)景下。確認(rèn) Browser actions 沒有使用在少數(shù)網(wǎng)頁才有功能的場(chǎng)景， 此場(chǎng)景請(qǐng)使用page actions。

確認(rèn)你的圖標(biāo)尺寸盡量占滿19x19的像素空間。 Browser action 的圖標(biāo)應(yīng)該看起來比page action的圖標(biāo)更大更重。

盡量使用alpha通道并且柔滑你的圖標(biāo)邊緣，因?yàn)楹芏嘤脩羰褂胻hemes，你的圖標(biāo)應(yīng)該在在各種背景下都表現(xiàn)不錯(cuò)。不要不停的閃動(dòng)你的圖標(biāo)，這很惹人反感。

【轉(zhuǎn)載請(qǐng)注明：【chrome 插件一】開發(fā)一個(gè)簡(jiǎn)單chrome瀏覽器插件 | 靠譜崔小拽 】

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79210.html

相關(guān)文章

  • 程序員的修行-《1.高效chrome插件》

    摘要：本文作者原文地址前言瀏覽器無論是作為瀏覽器市場(chǎng)的還是其強(qiáng)大的跨平臺(tái)能力以及豐富的擴(kuò)展插件，一直是許多開發(fā)者的首要選擇的瀏覽器。瀏覽器也因?yàn)槠湄S富的插件，幫助開發(fā)者們?cè)陂_發(fā)流程中極大地提高開發(fā)效率。 本文作者：TheBeauty原文地址:https://www.cnblogs.com/thebe... 前言 Chrome瀏覽器無論是作為瀏覽器市場(chǎng)的NO1還是其強(qiáng)大的跨平臺(tái)能力以及豐富的...

    Chiclaim 評(píng)論0 收藏0

  • 程序員的修行-《1.高效chrome插件》

    摘要：本文作者原文地址前言瀏覽器無論是作為瀏覽器市場(chǎng)的還是其強(qiáng)大的跨平臺(tái)能力以及豐富的擴(kuò)展插件，一直是許多開發(fā)者的首要選擇的瀏覽器。瀏覽器也因?yàn)槠湄S富的插件，幫助開發(fā)者們?cè)陂_發(fā)流程中極大地提高開發(fā)效率。 本文作者：TheBeauty原文地址:https://www.cnblogs.com/thebe... 前言 Chrome瀏覽器無論是作為瀏覽器市場(chǎng)的NO1還是其強(qiáng)大的跨平臺(tái)能力以及豐富的...

    nanchen2251 評(píng)論0 收藏0

  • Chrome 擴(kuò)展開發(fā)——編寫一個(gè)自己的瀏覽器插件

    摘要：配置文件每一個(gè)擴(kuò)展都有一個(gè)格式的文件，叫。此消息發(fā)送后會(huì)觸發(fā)擴(kuò)展內(nèi)每個(gè)頁面的事件。和持續(xù)長(zhǎng)時(shí)間的保持會(huì)話需要在和擴(kuò)展建立一個(gè)長(zhǎng)時(shí)間存在的通道。內(nèi)容腳本發(fā)送消息到擴(kuò)展程序建立通道，并給通道命名利用通道發(fā)送一條消息。 這次的練習(xí)是做一個(gè)Chrome的擴(kuò)展，分享一下入門開發(fā)過程。因?yàn)樵谙鬟f那塊糾結(jié)了特別久，所以我會(huì)重點(diǎn)總結(jié)消息傳遞那塊。 這次做這個(gè)插件的功能很簡(jiǎn)單，就是點(diǎn)擊按鈕后可以對(duì)當(dāng)...

    SunZhaopeng 評(píng)論0 收藏0

  • 從開發(fā) 2 個(gè) Chrome 插件中學(xué)到的（對(duì)新手的 4 個(gè)提示和 6 個(gè)技巧）

    摘要：提示插件可以重寫默認(rèn)的比如打開新時(shí)。這是在插件中定義的，因此不能后面做更改。把你的插件提交到的子版塊中。從圖中藍(lán)色點(diǎn)開始到后面的兩天曲線變化。曲線中間的那個(gè)小凸起，是二月份在發(fā)布的時(shí)候產(chǎn)生的。關(guān)于在插件中如何使用的教程在這里。 showImg(https://segmentfault.com/img/remote/1460000008971998?w=1920&h=1080); 本文...

    20171112 評(píng)論0 收藏0

  • 一個(gè)簡(jiǎn)單的chrome拓展程序開發(fā)

    摘要：相當(dāng)于發(fā)一個(gè)命令。這個(gè)函數(shù)能獲取到當(dāng)前標(biāo)簽的信息對(duì)象并傳遞給回調(diào)函數(shù)。向標(biāo)簽頁中的發(fā)送消息。接收到消息，執(zhí)行操作。會(huì)彈出一個(gè)控制臺(tái)。這樣我們就完成了一個(gè)簡(jiǎn)單的插件。 最近突然覺得有些常用的功能可以寫成瀏覽器插件，就不用把代碼放到console控制臺(tái)運(yùn)行了。只要點(diǎn)擊插件圖標(biāo)就可以自動(dòng)運(yùn)行。會(huì)方便很多。就去查了下chrome插件開發(fā)教程。本質(zhì)上講，chrome插件就是以一些特殊的方式運(yùn)行一...

    vslam 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<