15分钟学会写chrome插件

时间 2019-11-11

标签 15分学会 chrome 插件栏目 Chrome 繁體版

原文原文链接

chrome插件灰常简单，看看配置文件怎么写你就能够直接参照api文档, 天高任你飞了。javascript

chrome官方API地址:https://developer.chrome.com/extensions/api_indexcss

chrome官方入门教程(本身写的更粗暴直接一些):https://developer.chrome.com/extensions/getstartedhtml

以上两个链接貌似被墙了，若是你翻不了墙。。。。。。好吧，360貌似翻译了这个东西，多是时间缘由，有些地方与官方档有些细微差别，不过学习无妨，地址是http://open.chrome.360.cn/extension_dev/overview.htmljava

本教程简单有效，先跟着作，作完还不会的话就再来一遍，还不会的话............额，你可能不适合作这个。jquery

本文代码已放到git@OSC上，须要可自行下载，地址在文章结尾的地方。git

1.首先，新建一个文件夹，起名叫作"HelloChrome"。进入该文件夹，以此为工做台，下文全部文件都放这里面。chrome
2.而后，咱们进入到这个文件夹，使用除了(Windows)记事本以外的你经常使用的文本编辑器(如SublimeText等) 建立一个文件，名字叫作"manifest.json"。文件的内容以下:json

{
  "manifest_version": 2,    //就这么抄,如今是2,版本1已经在Chrome18的时候弃用(deprecated)了.
  "name": "HelloChrome",    //应用名字
  "description": "This is a HelloWorld Pragram, is too simple, too easy!",    //应用描述
  "version": "1.0",      //应用版本号
  "browser_action": {    //应用类型|browser_action或page_action(看图1)区别是前者在右上角后者在地址栏
    "default_icon": "icon.png",    //图标,可提供19或38PX或两个都提供
    "default_popup": "popup.html"    //点击图标时的弹出页面
  },
  "permissions": [    //使用到的权限，其余权限看API
    "activeTab",      //就理解成常规权限吧
    "https://www.baidu.com/"     //本示例未用到这个权限,该权限意思为应用可跨域请求www.baidu.com的内容
  ],
  "content_scripts": [    //这是能够注入到页面里执行的JS。这样就能够对页面进行操做了。这个能够没有，
    {                     //若是不须要对页面进行操做的话就不须要content_script这段了，就不用写了
      "matches": ["http://www.baidu.com/*"], //匹配百度，打开百度时执行下面的JS，其余执行条件看API
      "js": ["jquery.js", "content_script.js"]    //指定条件时要执行的JS
    }
  ]
}

这张图是图1。api

3.本身作一个"icon.png"文件，放到工做台(指第1步建立的文件,下文因此'工做台'都是此意)。大小为19px*19px或者38px*38px跨域
4.新建一个"popup.html"在工做台，内容以下。

<!DOCTYPE html>
<html>
    <head>
        <title>HellowChrome</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <style type="text/css">
            body{
                width: 300px;
                height: 200px;
            }
        </style>
    </head>
<body>
    <h3>Hello Chrome!</h3>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>
</html>

5.新建一个"popup.js"文件在工做台(上面那个HTML引用的JS)，内容以下，不能把JS直接写到popup.html里面去。chrome是不容许在页面文件里的JS的执行的。

$(function(){
    $("body").append("<p>恭喜你，已经学会了使用Broswer Action!</p>");
});

6.本身搞一个jQuery库更名成"jquery.js"放里面，若是你不想引用jquery的话，本身把JS改一下就行了.
7.新建一个"content_script.js"，内容以下，若是你在配置文件里没配content_script这步可忽略。

$(function(){
    console.log("content_script is running!");    //控制台输出
    $("input").val("恭喜你,已经学会了content_script的使用!");    //改变页面全部INPUT的内容
});

8.差很少了，打开chrome在地址栏输入chrome://extensions回车打开扩展程序页面。先勾选开发者模式，而后点载入正在开发的扩展，以下图所示。

9.而后右上角是否是多了一个图标，点他一下，是否是有反应了。而后打开百度，是否是已经被注入的JS更改了INPUT的内容。。。以下图所示。

最后把我把代码打包放到git@OSC上了，须要可自行下载，地址为http://git.oschina.net/isnail/HelloChrome