• Chrome 插件开发记录


    由于是学习记录,不作为教程,所以不详细讲解,只记录核心部分

    一般插件需要的列表:

    • manifest.json - 插件的配置文件,插件程序的入口。
    • icon.png - 小图标,推荐使用19*19的半透明png,更好的做法是同时提供一张38*38的半透明的png作为大图标。
    • popup.html - 点击插件图标时弹出页面。
    • popup.js - 弹出页面所引用的javascript文件。

    manifest.json:

     1 {
     2         "name": "My Extension",   //插件名称
     3         "version": "versionString",  //插件版本号             
     4         "description": "A plain text description",   //插件功能描述
     5         "icons": { ... },  //图片,一般需要三种不同分辨率的图片:16*16 48*48 128*128
     6         "default_locale": "en",     //支持国际化              
     7         "browser_action": {        //插件动作配置 
     8                      "default_icon": "icon16.png", // 可选
     9                      "default_title": "Google Mail", // 可选,shown in tooltip 
    10                      "default_popup": "popup.html" // 可选
    11          },  
    12         "page_action": {
    13                         "default_icon": {
    14                                                  "19": "cnblogs_19.png",
    15                                                  "38": "cnblogs_38.png"
    16         },
    17         "default_title": "cnblogs.com article information"},   
    18         "theme": {...},   
    19         "app": {...},     
    20         "background_page": "aFile.html",   
    21         "chrome_url_overrides": {...},    //替换页  
    22         "content_scripts": [...],   
    23         "homepage_url": "http://path/to/homepage",   
    24         "incognito": "spanning" or "split",   
    25         "key": "publicKey",    
    26         "minimum_chrome_version": "versionString",   
    27         "omnibox": { "keyword" : "aString" },    
    28         "options_page": "aFile.html",     //选项的配置页
    29         "permissions": [...],    //权限这里很重要,需要使用标签页、window等的要在这里配置权限
    30         "plugins": [...],      //和dll交互的时候需要在这里配置  
    31         "update_url": "http://path/to/updateInfo.xml" 
    32 }

    HTML文件:

      background.html主要是运行在后台,它在插件的生命周期中都存在,比如:你可以将一些持久的数据放到到背景页中,当需要的时候可以从背景页中得到。需要注意的是,使用了background.html,需要在manifest.json文件中要配置“background_page”:background.html。

          popup.html是单击chrome浏览器右上角任务栏中或者是地址栏的插件图标时弹出的页面,假如你有单击图标弹出气泡提示的需求,就可以在popup.html上下功夫。同样使用了popup.html就需要在manifest.json文件中要配置:

    1 "browser_action": {
    2     "default_icon": "icon16.png", 
    3     "default_title": "cnblogs", 
    4     "default_popup": "popup.html"
    5   },

    JS文件:

      background :可以把它认为是chrome插件的主程序,理解这个很关键,一旦插件被启用(有些插件对所有页面都启用,有些则只对某些页面启用),chrome就给插件开辟了一个独立的javascript运行环境(又称作运行上下文),用来跑你指定的background script。

    配置方法:

    "background": { "scripts": ["background.js"] }

      content_scripts:就是要注入到页面中的脚本,能访问DOM的内容,主要用于获取和修改页面的内容。默认情况下,它在网页加载完了和页面脚本执行完了,页面转入空闲的情况下运行,但这个是可以改变的。

    配置方法:

    "content_scripts": [
        {
          "js": [ "content_script.js" ]
        }
    ]

    由于Content Script和Background Script处于不同的运行环境中,所以不能直接互相访问,那它们之间通信就通过Message。例如:

    Content Script获取网页信息通过chrome.runtime.sendMessage(msg).

    Background Script通过chrome.runtime.onMessage.addListener(function (request, sender, sendRequest) {}))获取传递的信息;

    详细资料请查阅官方的资料:https://developer.chrome.com/extensions/index.html

  • 相关阅读:
    go grpc基础教程
    浅析 unsafe.Pointer 与 uintptr(重要)
    redis获得配置
    K8s 很难么?带你从头到尾捋一遍,不信你学不会(重要)
    iCountdown隐私政策
    [一、基础控件]2使用Text视图显示指定的文字
    iCountdown用户协议
    iLocalizable用户协议
    iLocalizable隐私政策
    Advise on OS patch upgrade with RAC
  • 原文地址:https://www.cnblogs.com/TandyChan/p/4829390.html
Copyright © 2020-2023  润新知