5分鐘學會開發瀏覽器擴展

時間 2019-11-06

原文原文鏈接

寫在前面

作web開發的同窗，常常會用到各類chrome瀏覽器插件，那麼咱們寄幾怎麼開發一個插件呢（實際上是瀏覽器擴展）？其實很簡單，你意想不到的簡單。只要有web開發基礎，會寫基本的html，css和js就能夠作。
那面就跟着我一塊兒開始吧！css

1.建立項目

首先新建一個文件夾，好比叫 plugin-demohtml

mkdir plugin-demo
cd plugin-demo/

2.manifest.json

chrome瀏覽器對插件基本要求就一個，就是要有一個manifest.json的文件。這個文件內容以下：web

{
    "name": "plugin-demo",
    "version": "0.9.0",
    "manifest_version": 2,
    "description": "chrome plugin demo",
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "5分鐘學會開發瀏覽器插件",
        "default_popup": "popup.html"
    }
}

這只是一個最基本的配置，詳細的配置參看這裏.chrome

3.建立界面

咱們注意到，在manifest.json的配置中，有一個default_popup的選項，它的值是 popup.html,因此咱們須要新建這麼一個頁面。
在當前項目下新建popup.html
內容咱們儘量的簡單了，以下：json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 400px;
            background: #fff;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    

    <div class="container">

        <h1>這是一個chrome 插件案例</h1>
        
        <p>created by Davie</p>

    </div>
</body>
</html>

頁面中，基本就是一個div以及內容展現，很簡單，你本身寫也能夠。
而後咱們的插件還須要一個圖標，圖標你能夠本身製做，也能夠去找一張圖。好比這裏.
我下載了一個蘋果的圖片做爲個人這個插件的圖標。放在項目根目錄。把圖標名字命名爲icon.png(或者修改配置也能夠)。
瀏覽器

下面就是最激動人心的時刻了！微信

四、安裝插件

如今咱們就可讓chrome瀏覽器來安裝咱們的插件了。
點擊瀏覽器最右側的三個點圖標，選擇更多工具->k擴展程序，或者直接在地址欄輸入 chrome://extensions/，打開擴展程序安裝界面。
工具

擴展界面：
學習

打開開發者模式，而後選擇「加載已解壓的擴展程序」
ui

找到咱們剛纔新建的項目，打開就能夠了。
如圖，咱們的插件已經安裝好了

五、查看效果

點擊蘋果🍎圖標就能看到咱們剛剛寫的插件頁面啦。

啦啦啦 ~啦 ~啦，啦啦啦 ~啦 ~啦，哈哈哈哈哈。。。。。。。。

什麼？圖片是哪來的？
是我後來偷偷加的，就問你騷不騷？😁

六、打包插件

插件通常都會打包成crx格式文件，方便安裝。下面咱們就把剛纔咱們開發的這個插件打包一下。
仍是擴展安裝界面，中間有個打包擴展的按鈕不知道你看到沒有

點擊這個按鈕，

點擊第一個瀏覽，打開剛纔咱們的插件項目，

點擊打包擴展程序按鈕，

很是快，就打包好了。點擊肯定關閉。找到咱們的擴展程序

七、使用crx格式文件安裝

找到咱們剛纔安裝好的插件

點擊刪除，卸載咱們直接經過源碼安裝的插件。
而後把剛纔打包好的crx文件直接拖入擴展安裝頁面，是的，就是直接拖過來，就這這麼暴力。

而後咱們就能夠看到插件安裝好了。

寫在後面

好了，如何去開發一個chrome插件已經介紹完了。下面就是你根據本身的須要，去寫一個屬於本身的chrome插件了。
代碼我就不給了，上面已經寫了。主要就是一個manifest.json文件。
更高級的功能實現，好比消息通訊，開發者工具等等，參考這篇文章：
https://www.cnblogs.com/liuxi...

其餘參考：https://www.w3cschool.cn/kesy...