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

二、首先新建配置文件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的扩展

以上注意选择开发者模式

六、开始打包

以上操作会在chrome_exten目录下生成两个文件，如果修改了代码，需要重新打包时，需要在上图的第一步“私有秘钥文件（可选）”选择myTB.pem,并将myTB.crx删除再点击“打包扩展程序”

将扩展crx文件拖入以上界面

七、使用扩展

打开淘宝网页（注意，重新使用扩展时需要刷新依赖的网页），点击右上角的扩展图标

此时可通过控制台查看扩展插件的源码

可通过打断点在此调试

通过使用插件的搜索功能，淘宝页面上被搜到的图片被加了黑框

参考：

http://www.cnblogs.com/mfryf/p/3701801.html

菜鸟写的第一个chrome插件的更多相关文章

  1. 动手做第一个Chrome插件

    Chrome插件是令人惊讶的简单,一旦你弄懂它的工作和实现原理.它是由一部分HTML,一部分Js,然后混合了一个叫做manifest.json的Json文件组合而成的整体.这意味着你可以使用你最擅长的 ...

  2. chrome 浏览器插件开发（一）—— 创建第一个chrome插件

    最近在开发一个chrome插件,在网上找到了一些的文章,虽说按照文章可以写出对应的例子,但若要进行实际开发,发现还是有不少文章中没有的坑.下面我将结合我在开发过程中遇到的几个方面,对这些坑做一下补充. ...

  3. 为了少点击几次，自己写了一个Chrome插件

    缘由 chrome应用商店有三款二维码插件,自己一直使用的第一款.这三款插件有且只有一个功能就是生成当前页面的URL的二维码. 其实这个功能基本上满足了需要移动端开发在微信里打开页面进行调试的情况. ...

  4. js写一个chrome 插件

    访问网站的时候,最烦的就是一些弹窗和广告.于是,就想着能不能在访问特定网站的时候,执行一段js脚本,去除页面的广告.于是乎,好像 chrome 插件可以实现. 这里,以 百度 的网站为例 新建 sim ...

  5. 我的项目：一个chrome插件的诞生记，名字叫jumper

    选课是个问题,为了选课,便有了以下的故事. 最开始,萌生想法于2013年7月. 接着网上了解了chrome的结构知识,却发现例子是假的. 幸好有之前师兄的一个同功能插件开源,但代码写得很乱,我喜欢逻辑 ...

  6. 写个简单的chrome插件-京东商品历史价格查询

    说chrome插件编写的先关文章, 首推小茗的[干货]Chrome插件(扩展)开发全攻略. 有非常完善的理论,引用和demo代码. 但是还是建议看官方的 chrome extensions. chro ...

  7. 开发一个chrome插件：将百度搜索热点屏蔽掉！

    每次百度搜索,搜索结果的右边总是出现些乱七八糟的搜索热点(推的都是些什么玩意,高校替课和我有毛关系,几个悲伤的热点我用星号顶掉了). 强迫症想把它隐藏掉,我用的是chrome浏览器,受adblock( ...

  8. 我的第一个Chrome插件：天气预报应用

    1.Chrome插件开发基础   开发Chrome插件很简单,只要会基本的前台技术HTML.CSS.JS就可以开发了. Chrome插件一般包括两个HTML页面background和popup.   ...

  9. 如何通过写一个chrome扩展启动本地程序

    @(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...

随机推荐

  1. [vim]的关键字补全

    除了complete关键字补全,所有补全相关命令都以CTRL-X开始,然后再接与补全类型相关的命令.CTRL-N与CTRL-P在找的的内容中选择的通用的命令,上下选择用的,CTRL-E则是取消选择.( ...

  2. Tomcat简易安装指南

    由于要学习activiti的使用,而activiti依赖于tomcat,所以下载了一个tomcat 7 的binary包,然后按照running.TXT中的描述来手动安装,下文主要是记录了在阅读run ...

  3. http状态码代表含义

    状态代码 状态信息 含义 100 Continue 初始的请求已经接受,客户应当继续发送请求的其余部分.(HTTP 1.1新) 101 Switching Protocols 服务器将遵从客户的请求转 ...

  4. python实现简易数据库之二——单表查询和top N实现

    上一篇中,介绍了我们的存储和索引建立过程,这篇将介绍SQL查询.单表查询和TOPN实现. 一.SQL解析 正规的sql解析是用语法分析器,但是我找了好久,只知道可以用YACC.BISON等,sqlit ...

  5. Scala之类型参数和对象

    泛型 类型边界 视图界定 逆变和协变 上下文界定 源代码 1.泛型 泛型用于指定方法或类可以接受任意类型参数,参数在实际使用时才被确定,泛型可以有效地增强程序的适用性, 使用泛型可以使得类或方法具有更 ...

  6. HTC Vive 体验的折腾经历

    HTC Vive 是个什么东西, 想必我就不用介绍了, 不知道自己百度吧 HTC Vive发布已经有一段时间了, 一直很纠结买还是不买, 这玩意太贵(官网6888),买了还不能直接用, 还要配太高性能 ...

  7. Mtk Ft6306 touch 驱动 .

    1.1.    MTK Touch 驱动的组成Mtk  Touch  driver 驱动包括:Mtk platform 虚拟平台设备驱动.Module touch IC 驱动.Input subsys ...

  8. Javascript基础系列之（六）循环语句（break和continue语句）

    break和continue语句对循环中的代码执行提供了更为严格的流程控制.break语句可以立刻退出循环,阻止再次执行循环体中的任何代码.continue语句只是退出当前这一循环,根据控制表达式还允 ...

  9. c# JD快速搜索工具，2015分析JD搜索报文，模拟请求搜索数据，快速定位宝贝排行位置。

    分析JD搜索报文 搜索关键字 女装 第二页,分2次加载. rt=1&stop=1&click=&psort=&page=3http://search.jd.com/Se ...

  10. MongoDB 3.0以上版本设置访问权限、设置用户

    定义:创建一个数据库新用户用db.createUser()方法,如果用户存在则返回一个用户重复错误. 语法:db.createUser(user, writeConcern)    user这个文档创 ...