菜鳥寫的第一個chrome插件

本文轉載自查看原文 2015-12-25 21:22 2035 瀏覽器相關/ chrome插件開發

一、新建一個文件夾，用來放插件的代碼

二、首先新建配置文件manifest.json

 1 // 開發參考：http://open.chrome.360.cn/extension_dev/overview.html
 2 // 字段說明參考：http://open.chrome.360.cn/extension_dev/manifest.html
 3 {
 4   "name": "myTB Name", // 必填
 5   "version": "1.0", // 必填
 6   "description": "myTB ...",
 7   "permissions": [
 8     "tabs", "http://*/*", "https://*/*"
 9   ],
10  
11   "browser_action": {
12       "default_title": "myTB title",
13       "default_icon": "20151225.jpg",
14       "default_popup": "popup.html"
15   },
16   "manifest_version": 2 // 必填 沒有會報錯：The 'manifest_version' key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details.
17 }

注意配置 manifest_version

三、其他代碼

1、popup.html

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5     <meta charset="utf-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1">
 8     <meta name="description" content="">
 9     <meta name="author" content="">
10     <title>myTB</title>
11 </head>
12 <body style="padding:0px; width:500px;" >
13     <input type="text" placeholder="請輸入您想搜索的圖片鏈接的關鍵詞" id="imgUrlKey"/>
14     <input type="button" value="找找看" id="myBtn" />
15     <script src="jquery-1.8.1.min.js"></script>
16     <script src="popup.js"></script>
17 </body>
18 </html>

2、popup.js

1 chrome.tabs.executeScript(null, {file: "content.js"});
2 $('#myBtn').click(function(){
3     var _imgUrlKey = $('#imgUrlKey').val();
4     if(!_imgUrlKey){
5         alert('請先輸入');
6         return;
7     }
8     chrome.tabs.executeScript(null, {code: "findImg('" + _imgUrlKey + "')"});
9 });

關鍵代碼：chrome.tabs.executeScript(null, {file: "content.js"});

通過這個popup.js就可以調用content.js的方法。content.js可以操作處理淘寶頁面的dom

3、content.js

function findImg(imgUrlKey){
    var imgs = document.querySelectorAll('img');
    if(!imgs && !imgs.length){
        return;
    }
    for(var i = 0, len = imgs.length; i < len; i++){
        var img = imgs[i];
        if(img.getAttribute('src').indexOf(imgUrlKey) > -1){
            img.style.border = '3px solid #440404';
        }
    }
}