chrome插件開發步驟

chrome插件有什麼用

chrome插件可以做很多事情，比如說大家經常用的二維碼生成器，禁廣告的，它類似于使用者的操作，但是又不需要使用者操作。

開始開發

不需要任何裝置，隻需要一個編輯器，一個chrome浏覽器。

先講一下插件的目錄結構

最重要的一個檔案：manifest.json

整個檔案夾的精髓所在，可以說是插件的入口。

manifest内容

{
    "name": "todo-plugin", //  名稱
    "version": "0.9.0", // 版本号
    "manifest_version": 2, // 一定需要，如果沒有，會報錯
    "description": "chrome plugin demo", // 描述
    "content_scripts": [ // 見詳情【1.1】
        {
            "matches": ["*://*/*"],
            "js": ["jquery.js","index.js"]
        }
    ],
    "background":{ // 見詳情【1.2】
        "scripts":["jquery.js","background.js"]
    },
    "permissions": [ 
        "http://tcservice.17usoft.com/"
    ]
        
}
           

【1.1】content_scripts 詳細說明

Content Scripts是運作在Web頁面的上下文的JavaScript檔案。通過标準的DOM，Content Scripts可以操作（讀取并修改）浏覽器目前通路的Web頁面的内容。

使用限制：

1.不能通路如下chrome.* API

chrome.extension API

chrome.i18n API

chrome.runtime API

chrome.storage API

2.不能通路Chrome擴充頁面中定義的JavaScript變量和函數

3.不能通路Web頁面或其他Content Scripts中定義的JavaScript變量和函數

屬性說明：

名稱	類型	可選/必選	說明
matches	string數組	必選	Content Script注入的Web頁面
exclude_matches	string數組	可選	Content Script不注入的Web頁面
include_globs	string數組	可選	對于matches比對的Web頁面，進一步限定URL
exclude_globs	string數組	可選	對于matches比對的Web頁面，進一步排除URL
match_about_blank	boolean	可選	是否注入Content Script到about:blank和about:srcdoc頁面，預設false
css	string數組	可選	注入到比對的Web頁面中的CSS檔案，順序相關
js	string數組	可選	注入到比對的Web頁面中的JS檔案，順序相關
run_at	string	可選	控制JS檔案注入的時機，如"document_start", “document_end”, “document_idle”。預設"document_idle","document_start"表示在CSS檔案之後，DOM建構或其他腳本運作之前，注入JS檔案。“document_end”,表示在DOM建構結束之後，圖檔或架構加載之前，注入JS檔案。"document_idle"表示在"document_end"與觸發window.onload事件之間的某個時間，注入JS檔案，具體時間可以根據頁面的内容和加載的進度優化。
all_frames	boolean	可選	控制JS檔案是否在比對的Web頁面中的所有架構中運作。預設false表示隻在頂層架構中運作

如上述的配置：matches表示所有web頁面均注入

js表示先加在jq，再加載index.js

【1.2】background配置相關

擴充常常用一個單獨的長時間運作的腳本來管理一些任務或者狀态。

背景頁是一個運作在擴充程序中的HTML頁面。它在你的擴充的整個生命周期都存在，同時，在同一時間隻有一個執行個體處于活動狀态。

在一個有背景頁的典型擴充中，使用者界面（比如，浏覽器行為或者頁面行為和任何選項頁）是由沉默視圖實作的。當視圖需要一些狀态，它從背景頁擷取該狀态。當背景頁發現了狀态改變，它會通知視圖進行更新。

執行個體

通過background.js跨域請求接口

content script js中代碼

chrome.runtime.sendMessage({
        type:'fetch',
        url:'https://flights.ctrip.com/itinerary/api/12808/products',// ctrip機票接口
        para:para
    }, function(response) {
        console.log('收到來自背景的回複：' + response);
    });
           

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
    console.log('收到來自content-script的消息：');
    console.log(request, sender, sendResponse);
    if (request.type == 'fetch') {
        var param = request.para
        param = JSON.stringify(param)
        $.ajax({
            url:"https://flights.ctrip.com/itinerary/api/12808/products",    //請求的url位址
            dataType:"json",   //傳回格式為json
            contentType:"application/json;charset=utf-8",
            async:true, //請求是否異步，預設為異步，這也是ajax重要特性
            data:param,    //參數值
            type:"POST",   //請求方式
            beforeSend:function(){
                //請求前的處理
            },
            success:function(req){
                //請求成功時處理
                console.log(req)
                sendResponse(JSON.stringify(req));
            },
            complete:function(){
                //請求完成的處理
            },
            error:function(){
                //請求出錯處理
            }
        });
    }
    return true;
});

           

如果有列印結果，說明成功

否則，就慢慢解決坑吧。