編寫Chrome擴展程序

Chrome的擴展程序不少，也很容易入門，能夠來簡單實現一下

看看 官方文檔 或者翻譯的文檔：百度、360，慢慢就能實現出一個擴展程序來

 

每一個擴展程序應用通常會包含：

• 一個manifest清單文件
• html文件
• js文件
• 其餘文件等

 

能夠看到，其實結構如同通常的頁面，有共通之處。

 

1、瞭解Chrome擴展程序

Chrome擴展程序商店地址爲：https://chrome.google.com/webstore/category/extensions?hl=zh-CN

訪問Chrome瀏覽器中已安裝的擴展：chrome://extensions/

 

能夠看到一些拓展程序的基本信息

通常來講，安裝擴展程序能夠進行在線安裝的方式，但在離線環境或內網機環境下，須要安裝擴展程序，要怎麼辦呢

crx文件

crx文件其實就是擴展程序包，可直接將其拖動到上述擴展程序列表頁面，便可安裝

在windows系統下，能夠在如下文件路徑訪問相應的擴展程序

最後這個圖中的文件，其實就是擴展程序的源碼了

在擴展程序列表頁中點擊打包擴展程序，選擇相應的程序目錄，就能夠打包出一個程序包

 

.crx文件就是咱們要的擴展程序包了，將其拖動到頁面，便可安裝。 .pem是密鑰文件

 

 

2、建立Chrome擴展程序

由上述知曉了擴展程序的大體信息，要建立一個擴展程序，也不外乎是建立一個項目，依據必定的規則編寫邏輯後再打包安裝

 

接下來就把以前寫的簡易計算器弄成一個擴展程序

看看博客園下方有幾個廣告，索性順便用擴展程序移除頁面上的廣告吧

 

 

擴展程序須要一個manifest清單文件，提供有關應用的各類信息

{
    "manifest_version": 2,
    "name": "my-calculator",
    "description": "A simple calculator",
    "version": "0.0.1",

    "permissions": [
        "tabs",
        "http://www.cnblogs.com/"
    ],

    "browser_action": {
        "default_icon": "icons/icon_active.png",
        "default_title": "Calculate it",
        "default_popup": "calculator.html"
    },

    "content_scripts": [{
        "matches": ["*://www.cnblogs.com/*"],
        "js": ["js/jquery.js", "js/content.js"]
    }]
}

這就是須要的清單文件了，定義了程序的基本信息，這些字段的做用就自行去 文檔 查看吧

文件目錄結構爲：

計算器的代碼，以前那篇文章有了，這裏就不貼了

要移除博客文章下的廣告，是操做頁面，因此應該在content_scripts文件裏操做，即這裏的content.js

$('div[id^="ad_"]').each(function() {
    var $this = $(this);
    console.log('remove', $this.attr('id'));
    $this.remove();
});

記得先在manifest中配置好permissions的頁面訪問權限

 

文件已經準備完畢，如今進行程序的打包

打包方式相似上述的方法，打包成功後拖進來安裝就好了

能夠看到計算器已經在擴展程序之中

再看看博客文章下的廣告，已經被清除了

 

3、發佈Chrome擴展程序

本身的Chrome擴展程序寫好以後，能夠發佈到商城之中

這篇文章 講得挺好，就很少說了