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

二、首先新建配置文件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. 几种Java NIO框架的比较（zz）

    问题:生活中工作中,会有人问我javaNIO框架里面 Netty Mina  xSocket Grizzly 等等哪个比较好? 在这里写一下自己的感受,也算是总结一下吧 在我的印象中.不管是什么NIO ...

  2. Linux第13周学习笔记

    网络编程 客户端-服务器编程模型 每个网络应用都是基于客户端-服务器模型. 一个应用是由一个服务器进程和一个或者多个客户端进程组成. 服务器管理某种资源,并通过操作资源来为客户端提供某种服务. 基本操 ...

  3. 技能获取与C语言学习情况

    你有什么技能比大多人(超过90%以上)更好? 仔细回想了一下自己到目前为止的学习生涯,好像真的没有什么技能能够比90%以上的人好. 初中高中学过很多东西,但是能够算得上专精的却着实没有.小学参加过计算 ...

  4. 20145222黄亚奇《Java程序设计》第1周学习总结

    教材学习内容总结 BJVM是Java程序唯一认识的操作系统,其可执行文件为.class文档 Java的三大平台为Java SE,Java EE,Java ME. Java SE的四个部分为:JVM,J ...

  5. SQL 语句大全

    转载:http://www.cnblogs.com/yubinfeng/archive/2010/11/02/1867386.html 经典SQL语句大全 一.基础 1.说明:创建数据库 CREATE ...

  6. 结合php ob函数理解缓冲机制

    对于一个刚刚入门的php程序员来说,php缓冲区是几乎透明的.在他们心目中,一个echo print_r 函数,数据便会‘嗖’的一声飞到浏览器上,显示出来.我也一直如此单纯地认为. 其实,在技术的世界 ...

  7. 『转载』C# winform 中dataGridView的重绘（进度条，虚线，单元格合并等）

    原文转载自:http://hi.baidu.com/suming/item/81e45b1ab9b4585f2a3e2243 最近比较浅的研究了一下dataGridView的重绘,发现里面还是有很多东 ...

  8. 怎样写 OpenStack Neutron 的 Extension （四）

    上文说到需要在 /neutronclient/v2_0/myextension/extension.py 中分别定义五个 class:List/Show/Create/Delete/UpdateExt ...

  9. 自己保留：data provider

    <system.data>    <DbProviderFactories >      <add name="MySQL Data Provider" ...

  10. [Aaronyang] 写给自己的WPF4.5 失传的第一本古老秘籍[多扩展显示器编程]

    世界上只有想不通的人,没有走不通的路 --Aaronyang的博客(www.ayjs.net)-www.8mi.me =============时隔两年后再看WPF,有些秘籍不太适合公开,公开了就不值 ...