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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。