一塊兒來作chrome擴展《AJAX請求》

時間 2019-11-20

原文原文鏈接

chrome在一次更新以後，出於安全考慮，徹底的禁止了content_script從https向http發起ajax請求，即便正常狀況下也會在console裏給出提示。這對於WEB來說是好事，但對於擴展來說就是壞事。平時能夠很容易的請求數據，如今就沒那麼容易了。好在chrome還提供了background_script，利用content_script和background_script以前的通訊來實現ajax的請求，就跳過了chrome的這一限制。css

content_script

從名字裏就知道，content_script是植入型的，它會被植入到符合匹配的網站頁面上。在頁面加載完成後執行。content_script最有用的地方是操做網站頁面上的DOM。一切平時作前端的一些操做它均可以作，像什麼添加、修改、刪除DOM，獲取DOM值，監聽事件等等，均可以很容易的作到。因此，若是想獲取人家的登陸賬戶和密碼，就是件很是容易的事，只須要添加content_script，監聽賬戶和密碼的文本框，得到值後將數據發送到本身的服務器就能夠了。所以，特別說明，別亂裝擴展，特別是不從官方擴展庫裏下載的擴展。前端

使用content_script

要使用content_script，須要在manifest.json中配置，以下：jquery

{
    "manifest_version": 2,
    "name": "My Extension",
    "description": "Extension description",
    "version": "1.0",

    "content_scripts": [{
        "js": [
            "content.js"
        ]
    }]
}

這樣，在頁面加載完成後，就會加載content.js，在content.js裏，就能夠控制頁面元素。若是要在content.js中使用jquery，須要將jquery文件加到content.js前面，如：ajax

content_script使用jquery

{
    "content_scripts": [{
        "js": [
            "jquery.js",
            "content.js"
        ]
    }]
}

除了能夠加載js，content_scripts裏還能夠加載CSS文件，這樣可讓你的擴展漂亮一點，如：chrome

content_script使用CSS

{
    "content_scripts": [{
        "js": [
            "content.js"
        ],
        "css": ["style.css"]
    }]
}

在content_scripts中，還有一項重要的設置就是matches，它是用來配置，符合擴展使用的網址，如：我只想這個擴展在打開www.jgb.cn時才啓用，那麼matches就要這樣寫：json

設置匹配網站

"content_scripts": [{
        "matches": [
            "http://*.jgb.cn/*"
        ],
        "css": ["css/common.css"],
        "js": [
            "include/jquery-1.11.0.min.js",
            "scripts/main.js"
        ]
    }]

若是還要匹配www.amazon.com，那就加上：跨域

{
    "matches": [
        "http://*.jgb.cn/*",
        "http://*.amazon.com/*"
    ]
}

注意，http只適用於http，像amazon.com這樣的站即有http也有https，因此得把https也加上，以下：瀏覽器

{
    "matches": [
        "http://*.jgb.cn/*",
        "http://*.amazon.com/*",
        "https://*.amazon.com/*"
    ]
}

background_script

它在chrome擴展啓動的時候就啓動了，作着它的事，並且等待着你給他的指令。它沒辦法控制頁面元素，但能夠經過content_script告訴它。ajax同理，若是要在頁面打開時向別的服務器請求數據，這時就能夠告訴background_script，讓它去請求，而後把返回的數據發送給content_script。這樣就不會受到瀏覽器的安全限制影響。安全

使用background_script

要使用background_script，須要在manifest.json中配置，以下：服務器

{
    "manifest_version": 2,
    "name": "My Extension",
    "description": "Extension description",
    "version": "1.0",

    "background": {
        "scripts": [
            "background.js"
        ]
    }
}

使用jquery和content_scripts同理，須要把jquery文件加到background.js前面，如：

在background_script中使用jquery

{
    "background": {
        "scripts": [
            "jquery.js",
            "background.js"
        ]
    }
}

跨域

默認狀況下Ajax是不容許跨域的，但擴展提供了跨域的配置，在前一篇《基礎介紹》中提到過，那就是permissions，它除了可讓擴展使用chrome的一些功能外，還能夠容許JS實現對目錄網站的跨域訪問，如：

{
    "permissions": [
        "http://www.jgb.cn/" // 容許跨域訪問www.jgb.cn
    ]
}

有了以上的配置，這時候就能夠來看看怎樣經過background_scripts來實現Ajax請求了。

向background發送請求

在content_script中向background_script發送請求有好幾種方式，這裏只列出我常的一種，應該來說，能知足大多數狀況的使用，其它方法，請查詢文檔，方法以下：

chrome.extension.sendMessage({}, callBack);

sendMessage()方法，它有兩個參數，第一個要發送的數據，就像post請求同樣，第二個是回調函數。如在content_script中，點擊一個按鈕，將一個字符串發送到background_script

$(function(){
    $("#button").click(function(){
        chrome.extension.sendMessage({'txt': '這裏是發送的內容'}, function(d){
            console.log(d); // 將返回信息打印到控制檯裏
        });
    });
})

在background中監聽content請求

在background中監聽content請求，使用chrome.extension.onMessage.addListener()，示例以下：

chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){});

objRequest，即爲請求的參數，在上一個例子就是{'txt': '這裏是發送的內容'}，能夠經過objRequest.txt來獲取內容。其實就是一個字典。

sendResponse，爲返回值方法，能夠將數據返回給content_script，那麼一個簡單的例子就是：

chrome.extension.onMessage.addListener(function(objRequest, _, sendResponse){
    var strText = objRequest.txt;
    // 將信息能過Ajax發送到服務器
    $.ajax({
        url: 'http://www.jgb.cn/',
        type: 'POST',
        data: {'txt': strText},
        dataType: 'json',
    }).then(function(){
        // 將正確信息返回content_script
        sendResponse({'status': 200});
    }, function(){
        // 將錯誤信息返回content_script
        sendResponse({'status': 500});
    });
});