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

二、首先新建配置文件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. Qt——树的搜索

    一.Qt中的树 Qt中树的实现有两种方式.第一种是使用Qt提供的QTreeWidget,很多函数都封装好,比较方便:另一种是通过QTreeView实现,设置它的数据模型,比如使用QStandardIt ...

  2. 如何在高并发分布式系统中生成全局唯一Id(转)

    http://www.cnblogs.com/heyuquan/p/global-guid-identity-maxId.html 又一个多月没冒泡了,其实最近学了些东西,但是没有安排时间整理成博文, ...

  3. OC格式化标准符

    %@       对象     •    %d, %i   整数     •    %u        无符整形     •    %f         浮点/双字     •    %x, %X   ...

  4. java 顺序 读写 Properties 配置文件

    java 顺序 读写 Properties 配置文件 支持中文 不乱码 java 顺序 读写 Properties 配置文件 ,java默认提供的Properties API 继承hashmap ,不 ...

  5. 用Canvas玩3D：点-线-面

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 玩Canvas玩了有两三个礼拜了,平面的东西玩来玩去也就那样,所以就开始折腾3D了. 因为Canvas画布终究还是平面的,所以要有3D就得 ...

  6. 开源分布式计算引擎 & 开源搜索引擎 Iveely 0.5.0 为大数据而生

    Iveely Computing 产生背景 08年的时候,我开始接触搜索引擎,当时遇到的第一个难题就是大数据实时并发处理,当时实验室的机器我们可以随便用,至少二三十台机器,可以,却没有程序可以将这些机 ...

  7. windows API 开发飞机订票系统 图形化界面 (四)

    接下来的是录入航班.修改航班信息功能的实现: //录入航班 BOOL EntryFlight(HWND hEntryDlg){ TCHAR szDiscount[]; TCHAR szFare[],s ...

  8. C# ArcEngine创建内存图层(转载)

    C#+Arcengine---创建内存图层 分类:技术文档 2009-12-11 14:43阅读(1498)评论(0) #region 在内存中创建图层        /// <summary& ...

  9. offsetWidth与scrollLeft

    有两个值一个是:scrollTop一个是scrollLeft第一个代表页面利用滚动条滚动到下方时,隐藏在滚动条上方的页面的高度:第二个代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度 do ...

  10. Linq之Expression初见

    目录 写在前面 系列文章 Expression 表达式树创建方式 一个例子 总结 写在前面 上篇文章介绍了扩展方法,这篇文章开始将陆续介绍在linq中使用最多的表达式树的相关概念,以概念及例子一一列出 ...