--1. 在html文件中引用js 文件

--2.在Google Chrome中开发简单插件

1.首先，简单说明一下在html 中引用js 文件：

将kittenbook.html 和 kittenbook.js 文件放在相同的目录下，两个文件的内容如下：

<html>

  <body>

   <p> Hello,world</p>

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

  </body>

</html>
var username = prompt('Hello, what \'s your name?');

document.body.innerHTML = '<h1>Hello, ' + username + '!</h1>';

输入name（此处输入Sam），并点击确定；根据 kittenbook.js的配置，会出现如下所示：

2.在Google Chrome 浏览器中开发插件 --- 此例为，访问百度主页时，会出现问候语。

首先打开 开发者模式 

新建一个manifest.json 文件，此处内容为：

{

  "manifest_version": 2,

  "name" : "kittenbook",

  "description" : "Replace photos on Facebook with kittens",

  "version": "0.0.1.1",

  "content_scripts" :[

    {

      "matches" : ["*://www.baidu.com/*"],

      "js" : ["value.js" , "prompt.js"]

    }

  ]

}

value.js 和 prompt.js 的内容如下，这三个文件是放在同一个目录下的。

prompt.js

var username = prompt('Hello, what \'s your name?');

//Option 1 ,use username/projectName/versionNumber/currentTime directly

document.body.innerHTML = '<h1>Hello, ' + username + '!</h1>' +

                          '<p>' + projectName + ' ' + versionNumber + ' accessed on:' + currentTime + '<p>';

//Option w ,use object to store username/projectName/versionNumber/currentTime value

//document.body.innerHTML = '<h1>Hello, ' + username + '!</h1>' +

//                         '<p>' + kbValues.projectName + ' ' + kbValues.versionNumber + ' accessed on:' + kbValues.currentTime + '<p>';

value.js

var projectName = 'kittenbook';

var versionNumber = '1.0.2';

var currentDate = new Date();

var currentTime = currentDate.getFullYear() + '-' +

                  (currentDate.getMonth() + 1) + '-' + currentDate.getDate() + ' at ' + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();

var kbValues = {

    projectName: projectName,

    versionNumber : versionNumber,

    currentTime : currentTime

};

manifest.json / prompt.js /value.js，准备好之后，使用Chrome浏览器，在扩展程序页面，点击 “加载已解压的扩展程序” 加载 manifest.json 文件：

加载成功后，如下所示:

此时，在Chrome浏览器中输入 www.baidu.com ,会弹出提示框：

输入name,并点击确定，会看到如下页面:

启用这个插件后，会影响正常访问百度主页。开发完成后，在浏览器扩展程序页面取消启用插件即可。

---可参考《一路编程》 Steven Foote

Google Chrome浏览器插件入门开发的更多相关文章

  1. Google Chrome浏览器调试入门————转载只为自己查看方便

    Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...

  2. google chrome 浏览器插件

    如果感觉浏览器(chrome)的背景是白色太亮太刺眼,可以先在 设置->外观->主题背景 里选择 oceanic,将浏览器头部颜色设置为海蓝色.然后再安装插件 “眼睛护航”,改变所有网页的 ...

  3. chrome浏览器插件开发经验（一）

    最近在进行chrome浏览器插件的开发,一些小的经验总结随笔. 1.首先,推荐360的chrome插件开发文档:http://open.chrome.360.cn/extension_dev/over ...

  4. 作为Web开发人员，我为什么喜欢Google Chrome浏览器

    来源: http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html 在Google Chrome浏览器出来之前,我一直使用FireF ...

  5. Google Chrome浏览器必备的20个插件

    Google Chrome浏览器虽然与火狐浏览器有所区别,不过他们都是很开放的浏览器产品,所以也有许多有用的插件,这些插件对于日常生活与网络冲浪都很有用,比如网银,炒股等. Google Chrome ...

  6. 哇塞，原来自己写 Google Chrome 浏览器扩展（插件）这么容易！

    1. 首先新建一个记事本,命名为 manifest.json,这是写 Google Chrome 浏览器扩展必须的文件 { "manifest_version": 2, " ...

  7. 用Javascript编写Chrome浏览器插件

    原文:http://homepage.yesky.com/62/11206062.shtml 用Javascript编写Chrome浏览器插件 2010-04-12 07:30 来源:天极网软件频道 ...

  8. Google Chrome浏览器调试功能介绍

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  9. CEF中文教程(google chrome浏览器控件) -- Windows下编译Chromium

    CEF中文教程(google chrome浏览器控件) -- CEF简介 2013-04-10 16:48 42928人阅读 评论(4) 收藏 举报  分类: CEF(2)    目录(?)[+]   ...

随机推荐

  1. python代码风格检查工具──pylint

    pylint是一个python代码检查工具,可以帮助python程序员方便地检查程序代码的语法和风格,通过这个工具,可以使你的python代码尽量保持完美,哈哈.具体可以检查什么东西呢?比如你写了 f ...

  2. 大数据_zookeeper环境搭建中的几个坑

    文章目录 [] Zookeeper简介 关于zk的介绍, zk的paxos算法, 网上已经有各位大神在写了, 本文主要写我在搭建过程中的几个极有可能遇到的坑. Zookeeper部署中的坑 坑之一 E ...

  3. 许多其他C++的class样本

    class A{  public:  A(){}//构造函数,作用分配类所需的空间 }; int main() {  A a; } a它是类A示例! 版权声明:本文博客原创文章.博客,未经同意,不得转 ...

  4. SQL Server数据库碎片整理

    碎片产生   在SQL Server中,存储数据的最小单位是页,每一页所能容纳的数据为8060字节.而页的组织方式是通过B树结构  SQL Server向每个页内存储数据的最小单位是表的行(Row)  ...

  5. DataGridView 鼠标双击获得行列索引

    如果是CellDoubleClick事件,可以在事件的参数e里获取列索引及行索引.也可以通过CurrentCell来获取当前选中的单元格的列索引及行索引.参考:private void dataGri ...

  6. AY的Dapper研究学习-继续深入-C#开发-aaronyang技术分享

    原文:AY的Dapper研究学习-继续深入-C#开发-aaronyang技术分享 ====================www.ayjs.net       杨洋    wpfui.com      ...

  7. WPF 用代码调用dynamic resource动态更改背景 - CSDN博客

    原文:WPF 用代码调用dynamic resource动态更改背景 - CSDN博客 一般dynamic resoource通常在XAML里调用,如下范例: <Button Click=&qu ...

  8. datacontract helper

    public static class DataContractHelper { public static void ToDCFile<T>(this T obj, string pat ...

  9. miniui处理多重子表级联，一次性提交多表数据的ui要点

    在一个ui界面上 有a,b,c三个表 a表只有一条记录,b表有多条记录,c表有多条记录 b是a的子表,c是b的子表 都是一对多关系 一次性下载相关联的c表记录 然后mini-datagrid采用cli ...

  10. Win10《芒果TV》春季商店版更新v3.3.0：全新视觉蜕变&支持快男直播

    在微软发布Win10创意者更新正式版前夕,Win10版<芒果TV>迅速更新至v3.3.0,主要是全新升级视觉交互,新增大咖快男个人直播,全面优化底层架构,启动大提速. Win10版< ...