【chrome 插件一】開發(fā)一個簡單chrome瀏覽器插件

MiracleWong 發(fā)布于2019-08-19 18:07 / 1919人閱讀

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

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

了解chrome 插件

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

推薦兩個網站了解和入門
谷歌官方API：https://developer.chrome.com/extensions/getstarted
360的文檔：http://open.chrome.360.cn/extension_dev/overview.html

開始寫第一個插件 文件結構

一個簡單的demo，文件目錄如下

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

html:存放html頁面

js :存放js

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

image ：放了兩張圖片【初期圖標】

manifest ：核心入口文件

寫一個manifest

api參考文檔 :http://open.chrome.360.cn/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"
  },
  // 選擇默認語言
  "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"
    }
  ],
  // 應用協議頁面
  "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
選擇加載已解壓的插件-》選擇文件根目錄即可。
效果如下：

一個基本的插件變完成了，勾選已啟用，隨便打開一個網頁，會看到log中輸出如下

點擊頁面上面的小圖標如下圖：

優(yōu)化建議

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

確認 Browser actions 只使用在大多數網站都有功能需求的場景下。確認 Browser actions 沒有使用在少數網頁才有功能的場景，此場景請使用page actions。

確認你的圖標尺寸盡量占滿19x19的像素空間。 Browser action 的圖標應該看起來比page action的圖標更大更重。

盡量使用alpha通道并且柔滑你的圖標邊緣，因為很多用戶使用themes，你的圖標應該在在各種背景下都表現不錯。不要不停的閃動你的圖標，這很惹人反感。

【轉載請注明：【chrome 插件一】開發(fā)一個簡單chrome瀏覽器插件 | 靠譜崔小拽】

GPU云服務器云服務器 chrome webrtc插件 Chrome 插件 webrtc 谷歌瀏覽器chrome chrome webrtc 開發(fā)

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79210.html

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

摘要：本文作者原文地址前言瀏覽器無論是作為瀏覽器市場的還是其強大的跨平臺能力以及豐富的擴展插件，一直是許多開發(fā)者的首要選擇的瀏覽器。瀏覽器也因為其豐富的插件，幫助開發(fā)者們在開發(fā)流程中極大地提高開發(fā)效率。本文作者：TheBeauty原文地址:https://www.cnblogs.com/thebe... 前言 Chrome瀏覽器無論是作為瀏覽器市場的NO1還是其強大的跨平臺能力以及豐富的...

Chiclaim 2019-08-16 13:25 評論0 收藏0
程序員的修行-《1.高效chrome插件》

摘要：本文作者原文地址前言瀏覽器無論是作為瀏覽器市場的還是其強大的跨平臺能力以及豐富的擴展插件，一直是許多開發(fā)者的首要選擇的瀏覽器。瀏覽器也因為其豐富的插件，幫助開發(fā)者們在開發(fā)流程中極大地提高開發(fā)效率。本文作者：TheBeauty原文地址:https://www.cnblogs.com/thebe... 前言 Chrome瀏覽器無論是作為瀏覽器市場的NO1還是其強大的跨平臺能力以及豐富的...

nanchen2251 2019-08-23 12:22 評論0 收藏0
Chrome 擴展開發(fā)——編寫一個自己的瀏覽器插件

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

SunZhaopeng 2019-08-20 11:09 評論0 收藏0
從開發(fā) 2 個 Chrome 插件中學到的（對新手的 4 個提示和 6 個技巧）

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

20171112 2019-08-20 15:37 評論0 收藏0
一個簡單的chrome拓展程序開發(fā)

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

vslam 2019-08-20 12:23 評論0 收藏0