1.新建文件夹

如图:整个项目的结构

2.新建一个名为manifest.json的文件,编码模式为utf-8,(可以先建好txt文件然后再将文件后缀txt改为json)

3.用记事本写入代码如下:(manifest.json)

 {

 　　"name": "Test_APP",

 　　"version": "1.0",

 　　"manifest_version":2,

 　　"description": "Test_APP",

 　　"browser_action":{

 　　　　"default_icon": "./icos/rh_16.ico",

 　　　　"default_popup": "popup.html"

 　　},

 　　"icons": {

 　　　　"16": "./icos/rh_16.ico",

 　　　　"32":"./icos/rh_32.ico",

 　　　　"48": "./icos/rh_48.ico",

 　　　　"128": "./icos/rh_128.ico"

 　　},

 　　"permissions": [

 　　　　"tabs",

 　　　　"http://*/",

 　　　　"https://*/"

 　　]

 }

注释:其中browser_action 中的dafault_icon 是自己 准备的图片(我将一张jpg到网站上转化为了几张不同大小的ico),dafault_popup是默认页面

4.　新建一个html页面 名字叫popup.html内容如下:

 <html>

     <head>

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

         <title>Ceshi</title>

         <script type="text/javascript" src="jquery-1.10.2/jquery-1.10.2.js"></script>

         <script type="text/javascript" src="popup.js" ></script>

     </head>

     <body>

      <input type="button" id="btn" value="改变百度图片测试"/>

     </body>

 </html>

注:其中使用到jQuery,请自行下载,如上所示 我使用jquery-1.10.2文件夹中的jquery-1.10.2.js文件

5.新建popup.js文件,内容如下:

 $(function () {

     ///注入 执行文件

     chrome.windows.getCurrent(function (currentWindow) {

         chrome.tabs.query({ active: true, windowId: currentWindow.id },

             function (activeTabs) {

                 chrome.tabs.executeScript(activeTabs[0].id, { file: "./jquery-1.10.2/jquery-1.10.2.js", allFrames: false });

             });

     });

     //注入 执行文件

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

         chrome.windows.getCurrent(function (currentWindow) {

             chrome.tabs.query({ active: true, windowId: currentWindow.id },

                 function (activeTabs) {

                     chrome.tabs.executeScript(activeTabs[0].id, { file: "./xx.js", allFrames: false });

                 });

         });

     });

 });

注释:此处使用jQuery语法 因为在popup.html文件中已经引用jquery文件;

注1:其中第一条为貌似为固定写法 以为:将指定文件"注入到"当前网站,然后运行主要进去的js文件.

注2:其中在xx.js文件是我执行的文件.其中使用到jquery语法,所以需要将jquery"注入到"当前页面

6.新建xx.js文件(此js文件为主要执行代码),内容如下:

 $('#lg').html('<h1>1!2!3!4!5! 上山打老虎 </h1>');

注释:因为百度首页的logo使用的div的id为lg你懂得......

7.就此代码工作完成,打开chrome浏览器,工具->扩展程序->加载正在开发的扩展程序    然后选择第一步建立的文件夹.ok.....你会看到chrome右上角多出一个app,然后转到百度首页,单击咱们的app,会发现 百度首页的logo 被替换为 .....你懂得....

8.关于app程序打包为crx,依然是 Chrome浏览器->工具->扩展程序->打包扩展程序...剩下的 你懂得 你会得到 一个 xx.crx..然后你就可以吧这个crx给别人了...哈哈

源码下载: http://pan.baidu.com/share/link?shareid=526440339&uk=2754452510

最后感谢 :小辉辉(朱京辉)同学 的大力帮助　

感谢 杨洋大牛 提供 中文开发 文档:http://open.chrome.360.cn/extension_dev/overview.html

　

小菜在此敬上,欢迎大牛指点

Chrome插件开发 尝试1的更多相关文章

  1. Chrome插件开发 尝试2

    在文章1中 尝试了开发chrome一个蛋疼的插件,而且必须要写 一坨令人费解的代码才能只能,今天来次清爽的开发:如图: 这是 "清爽模式" →_→ 我把popup.html与pop ...

  2. 【转载】Chrome插件开发 尝试

    本来来自 http://www.cnblogs.com/rufus-hua/ 1.新建文件夹 如图:整个项目的结构 2.新建一个名为manifest.json的文件,编码模式为utf-8,(可以先建好 ...

  3. [Chrome插件开发]001.入门

    Chrome插件开发入门 Chrome扩展文件 Browser Actions(扩展图标) Page Actions(地址栏图标) popup弹出窗口 Background Pages后台页面 实战讲 ...

  4. chrome插件开发-消息机制中的bug与解决方案

    序言 最近开发chrome插件,涉及到消息传递机时按照教程去敲代码,结果总是不对.研究了大半天终于找到原因,现在记录下. 程序 插件程序参考官网 chrome官网之消息传递机制, 不能FQ的同事也可以 ...

  5. Chrome插件开发入门（二）——消息传递机制

    Chrome插件开发入门(二)——消息传递机制   由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一 ...

  6. vue.js 初体验— Chrome 插件开发实录

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...

  7. Chrome插件开发，美化网页上的文件列表。chrome-extension，background

    上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修 ...

  8. Chrome插件开发，美化网页上的文件列表。chrome-extension，content-scripts

    趁着2018年还剩最后几天,发几篇博客,荒废太久了,惭愧. 最近也是需求驱动,研究了下Chrome插件开发.来看一下我们公司运维提供的日志查看页面 所有项目的日志都参杂在一起,每次去找都很痛苦.慢慢发 ...

  9. chrome插件开发学习（一）

    两个不错的网址: 360chrome插件开发文档:http://open.chrome.360.cn/extension_dev/manifest.html 图灵 chrome插件开发于应用 电子书: ...

随机推荐

  1. 使用ffmpeg向crtmpserver发布rtsp流

    ffmpeg的调用命令如下: ffmpeg -re -i xxx.mp4  -vcodec copy -acodec copy -f rtsp rtsp://127.0.0.1/live/mystre ...

  2. 【转】 UIALertView的基本用法与UIAlertViewDelegate对对话框的事件处理方法

    原文网址:http://blog.csdn.net/enuola/article/details/7900346 首先,视图控制器必须得实现协议UIAlertViewDelegate中的方法,并指定d ...

  3. Oracle RAC OCR 的备份与恢复

    Oracle Clusterware把整个集群的配置信息放在共享存储上,这些信息包括了集群节点的列表.集群数据库实例到节点的映射以及CRS应用程序资源信息.也即是存放在ocr 磁盘(或者ocfs文件) ...

  4. 一次library cache pin故障的解决过程

    内容如下: 今天接到同事的电话,说他的一个存储过程已经run了一个多小时了,还在继续run,他觉得极不正常,按道理说不应该run这么长时间. 我说那我去看一下吧. 这个库是一个AIX上的10.2.0. ...

  5. css中将div定位居中

    一直,我是认为定一个width,然后写一句margin:0 auto,就可以,但是有时也会不管用. 例如当我要定一个宽度为700的div,用相对定位定在中间.任你怎么拉伸都是居中.而position: ...

  6. 关于DatePicker控件在IsEnabled为False视觉效果没有明显辨识度的处理方法

    DatePicker控件在IsEnabled为False时界面没有让人看上去不可用(背景为灰色等)的效果.容易让用户迷惑. 可以用下面的代码增加设置透明度的触发器来解决(XAML以及C#方式): &l ...

  7. 只用css实现“每列四行，加载完一列后数据自动填充到下一列”的效果

    只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果.这个题目用图表示如下: 如果将题目换成“只用css实现每行四列,加载完一行后数据自动填充到下一行”,那这个问题就简单多了,相信大家都 ...

  8. POJ 3977 Subset

    Subset Time Limit: 30000MS   Memory Limit: 65536K Total Submissions: 3161   Accepted: 564 Descriptio ...

  9. mysql操作时遇到的小问题

    mysql数据库在程序中执行sql语句时,或者在执行sql时,数据库表可能会有一些特殊的字符,比如说#,.等,这样在执行时 可能会遇到问题 如以下的表名,backup_2014.2.22, 这个表在查 ...

  10. htmlcss笔记--标签默认值样式重置css reset

    1.<a>标签 有默认文字修饰:下划线, 去除:text-decoration:none; text-decoration属性值: none 默认.定义标准的文本. underline 定 ...