菜鸟写的第一个chrome插件

一、新建一个文件夹，用来放插件的代码

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

 // 开发参考：http://open.chrome.360.cn/extension_dev/overview.html

 // 字段说明参考：http://open.chrome.360.cn/extension_dev/manifest.html

 {

   "name": "myTB Name", // 必填

   "version": "1.0", // 必填

   "description": "myTB ...",

   "permissions": [

     "tabs", "http://*/*", "https://*/*"

   ],

   "browser_action": {

       "default_title": "myTB title",

       "default_icon": "20151225.jpg",

       "default_popup": "popup.html"

   },

   "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.

 }

注意配置 manifest_version

三、其他代码

1、popup.html

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <meta name="description" content="">

     <meta name="author" content="">

     <title>myTB</title>

 </head>

 <body style="padding:0px; width:500px;" >

     <input type="text" placeholder="请输入您想搜索的图片链接的关键词" id="imgUrlKey"/>

     <input type="button" value="找找看" id="myBtn" />

     <script src="jquery-1.8.1.min.js"></script>

     <script src="popup.js"></script>

 </body>

 </html>

2、popup.js

 chrome.tabs.executeScript(null, {file: "content.js"});

 $('#myBtn').click(function(){

     var _imgUrlKey = $('#imgUrlKey').val();

     if(!_imgUrlKey){

         alert('请先输入');

         return;

     }

     chrome.tabs.executeScript(null, {code: "findImg('" + _imgUrlKey + "')"});

 });

关键代码：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';

        }

    }

}

四、代码结构

菜鸟写的第一个chrome插件