chrome插件开发hello word

首先准备一个目录,用于存放插件

然后建配置文件manifest.json,这是唯一必须用的文件,内容如下。

{
  "manifest_version": 2,
  "name": "helloword",
  "version": "1.0"
}

到此,不管你信不信,我们的插件写完了,哈哈。

接下来加载运行

点击右上角【设置】按钮,就是那个三道杠,然后选择【更多工具】中的【扩展程序】,看到如下界面。而后点击【开发者模式】、【加载已解压的扩展程序】, 选择你的插件目录就OK了。看看是不是有了你的插件,虽然现在我们什么都没干。

如果你修改了扩展程序,只需要刷新这个页面或者点一下【重新加载】就OK了。接下来,我们需要给我们的插件添加个图标。

首先,我们下载一个图标文件,png或者ico,放到我们的插件目录。

而后,在配置文件中添加这么一行

"icons": {
      "48": "icon.png"
   }

这里需要注意格式,目前你的配置文件应该长这样,特别注意icons前边的逗号,其实说白了就必须是符合JSON格式的规范:

这样我们的扩展程序在右上角还是没有图标,咋整呢?添加下边的配置,将会有惊喜:

    "browser_action": {
      "default_icon": "icon.png"
    }

变化请看浏览器的右上角,地址栏的右侧。图标OK了,你就知道在上述界面中如何添加属性了,你还可以添加描述、作者等,这些都是附属品,我们就不讲了。

讲了半天,我们的chrome插件还是个摆设,只能玩一玩,怎么给它添加功能呢。接下来我们先写个简单的,先预热一下:

首先, 在我们的插件目录创建一个js文件,比如helloworld.js

然后,我们在配置文件中加载这个js文件,添加如下配置:

"content_scripts":[{
    "js": [ "helloworld.js" ],
    "matches": [ "<all_urls>" ]
}]

这里content_scripts的意思就是这段代码是插入到浏览的页面中的,chrome插件假设页面有这么几种,一种是background
就是在后台执行的;另一种是popup弹出类型的,比如右上角的图标点击后可以弹出一个页面来,用于设置等;另一种是contents类型的,这种是在当
前浏览的页面。并且他们直接可以互相通信,这里我们先不研究这种比较复杂,主要是还用不到的东西。我们只需要了解这个contents_script就是
能够操纵当前浏览的页面的代码就好了。

下边我们在helloworld.js中稍微添加点js代码,比如:

alert("Hello, world!");

这样打开任何页面都会弹出对话框了。

光弹对话框没什么意思,接下来引入更高级一点

首先加载jquery

"content_scripts":[{
    "js": [ "jquery-1.11.3.min.js","helloworld.js" ],
    "matches": [ "<all_urls>" ]
  }]

然后在helloword.js中像写传统JS一样写代码

$(function(){
  jobs = [];
  $(".entry-title").each(function(){
       //jobs.push($(this).find('strong').text());//获取所有标题
       alert($(this).find('a').text());
  });
  //异步提交数据
  $.ajax({
      url : "http//<yoururl>/<path>",
      dataType:"jsonp",
      data:{
          jobs : jobs
      },
      success:function(){}
  });
});

再打开http://www.so-cools.com 

就会看到弹出所有的标题了

发表评论

电子邮件地址不会被公开。 必填项已用*标注