chrome插件开发小白常识_插件小白基础

项目基本目录// 简单的demo目录├── icon.png
├── manifest.json
├── popup.html
└── popup.js上手调试打开chrome://extensions/ 开启开发者模式,选择加载已解压的扩展程序选中自己的项目文件即可上手调试项目下文件解析manifest.json 配置文件{// 必须”manifest_v

chrome插件开发小白常识

项目基本目录

// 简单的demo目录

├── icon.png
├── manifest.json
├── popup.html
└── popup.js

上手调试

打开chrome://extensions/ 开启开发者模式,

chrome插件开发小白常识_插件小白基础

选择加载已解压的扩展程序

选中自己的项目文件即可上手调试

项目下文件解析

{
 // 必须
 "manifest_version": 2,
  "name": "我的扩展程序",
  "version": "版本字符串",
  
  // 可选:浏览器按钮可以包含图标、工具提示、徽章和弹出内容。
   "browser_action": { 
    "default_title": "get cookie In chrome", // 鼠标移动到插件icon会tips
    "default_popup": "popup.html", // 点击之后popup出来的部分
    "default_icon": "icon.png", // 插件的icon
    
    // page_action 配置的是指浏览器地址栏中的一些交互,较少人这么用
    
    
    "background": { // 后台运行程勋/脚本配置
        "scripts": ["eventPage.js"], // 脚本,
         "page": "background.html", // 也可以是html
        "persistent": false // 是否长期运作
      },
      
     "permissions": [ // 权限配置,表示在js执行过程能使用的权限
          "tabs", // 拥有使用chrome tab的权限
          "bookmarks", // 可以使用书签的权限
          
          "http://www.blogger.com/", // 设置站点权限
          "http://*.google.com/", 
          "unlimitedStorage" // 不限制存储
          ...// 详细配置请看下面
        ],
    ....
  },
 }
 
 

上面提到部分的详细说明文档:

permissions 权限清单

通讯

1.chrome.runtime.sendMessage 适合

content.js => background.js 通讯
content.js => popup.js 通讯
background.js => popup.js 通讯

2.chrome.tabs.sendMessage适合

background.js => content.js

popup.js => content.js

3.接受信息用chrome.runtime.onMessage.addListener

4.popup页面可以通过chrome.extension.getBackgroundPage() 方式调用background的函数

一些小坑

1.引入vue 会出现 安全性问题,需要在manifest.json中设置

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

2.如果需要在background中使用jquery, 需要提前将jquery在background.js之前引入 ,
如 :

"background": {
    "scripts": [jquery-3.4.1.min.js", "background.js"],
    "persistent": true
  },
  

3.每个运行环境都有自己的devTools,比如popup界面需要调出开发者工具需要对着插件的icon点击右键,然后点击审查弹出内容,需要调出background需要在chrome://extensions/ 找到插件,如果background.js配置成功的话 会有一个背景页的链接,点击就会调出开发者工具

4.官方说在background写定时任务需要使用到alarm 但是实际上settimeout和setintervel也是可以的(另外如果防止chrome杀掉后台程序,需要设置manifest.json中的persistent = true)

5.在background 程序中可以发器ajax请求,但是需要api所在服务器支持跨域设置

6.html中的inline javascript 不会被执行

海计划公众号
(0)
上一篇 2020/03/24 05:42
下一篇 2020/03/24 05:42

您可能感兴趣的内容

  • ES6之Proxy入门基础_Proxy基础知识

    1. 概述Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种『元编程』即对编程语言进行编程。 1.1 理解Proxy 是在目标对象之前架设一层『拦截』,外部对对象的访问,都需要经过该层拦截。因此在拦截中对外界的访问进行过滤和改写。 在Es6 中 提供了原生的 Proxy 构造函数,可以用来生成 Proxy实例。let prox

    2020/03/24
  • ES6与 CommonJS 模块化的区别攻略教程_模块化使用帮助

    1、CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。ES6 Modules 的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用

    2020/03/22
  • Ratchet小白基础一个优秀的类似bootstrap的前端框架

    Ratchet基础入门 官方网址:http://goratchet.com GitHub:https://github.com/twbs/ratchet 简介描述:一个优秀的类似b…

    2020/03/05
  • jquery与javascript的区别是什么?基础知识_区别入门百科

    jquery和javascript之间有什么区别?下面本篇文章就来给大家介绍一下jquery和javascript的区别,希望对大家有所帮助。JavaScript和Jquery的区别1、本质上的区别Javascript是一门编程语言,我们用它来编写客户端浏览器脚本。jQuery是基于javascript的一个库,包含多个可重用的函数,用来辅助我们简化java

    2020/03/20
  • 写优雅的代码,做优雅的程序员小白攻略_代码基础知识

    Q1:软件工程学什么? 学计算机,写程序,做软件,当程序员。Q2:软件工程(Software Engineering)跟计算机科学(Computer Science)是什么关系?两个专业的课程安排相近。CS专业会更深入地学习计算机理论和原理,SE更注重编程实践能力。专业选择上,看分数线选。Q3:听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世

    2020/04/03
  • es2020空位合并运算符、可选链接运算符小白帮助_运算符小白帮助

    空位合并运算符 ??由于 JavaScript 的类型时动态的,在分配变量时,我们不得不去记住哪些值会被判断为真,哪些会被判断为假。当我们在创建一个对象时,通常会初始化属性为假的值,比如一个空字符串 或者是 0。设置默认值就会变得很烦人,因为它会覆盖有效值,看下如下 demo,你就会发现这么处理真的很烦人:let person = {profile: {na

    2020/03/20
  • JavaScript中的循环和作用域小白攻略_js知识入门基础教程

    JavaScript有一个特点,也许会让开发者头痛, 是与循环和作用域相关的,举个例子:const operations = []
    for (var i = 0; i {console.log(i)})
    }
    for (const operation of operations) {operat

    2020/04/03
  • IntersectionObserver滚动加载基础教程_加载小白攻略

    定义就是监听根元素与目标元素在指定的交叉比例时触发回调兼容性兼容部分现代游览器(chrome)生产环境中使用,请注意兼容需求使用场景在一定使用场景可替代onscroll1、写法上更加简单优雅2、避免了onscroll带来的大量位置计算,提高性能例如1:滚动(上拉)加载例如2: 懒加载API介绍创建一个实例var observer = new Intersec

    2020/03/23
  • 用户网站访问速度慢详解基础指南_网站菜鸟教程网

    一.某个用户向你反映说你开发的网站访问速度很慢,但是该用户访问其他问题很正常,分析下原因、有哪些工具分析原因、怎么解决问题?(1)可能的原因一:服务器出口带宽不够用。这是一个很常见的瓶颈。一方面,可能是本身购买的服务器出口带宽就很小(企业购买带宽相当昂贵),一旦用户访问量上来了,并发量大了,自然均分给用户的出口带宽就更小了,所以某些用户的访问速度就会下降了很

    2020/03/26
  • meta标签中的http-equiv属性使用入门教程_标签入门基础知识

    http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 meta标签的http-equiv属性语法格式是: 其中http-equ

    2020/03/24
  • 在 React 中使用 Typescript基础指南_Typescript菜鸟指南

    前言用 Typescript 写 React 可比写 Vue 舒服太多了,React 对 ts 的支持可谓天生搭档,如果要用 ts 重构项目,不像 Vue 对项目破坏性极大,React 可以相对轻松的实现重构。顺便一提:全局安装的 create-react-app 现已无法再下载完整的 React 项目模版,必须先 npm uninstall -g crea

    2020/03/20
  • datetimepicker入门教程_时间和日期选择器的 jQuery 插件

    datetimepicker入门教程 官方网址:https://xdsoft.net/jqplugins/datetimepicker/ GitHub:https://github…

    2020/03/06
  • scrimba小白攻略_非常有创意的编程教学网站

    scrimba小白攻略 官方网址:https://scrimba.com/ 简介描述:非常有创意的编程教学网站 Scrimba一个交互式编程教学网站。 关于Scrimba,它不同于…

    2020/03/06
  • Blockly – 来自Google的可视化编程工具使用帮助_编程使用帮助

    Google Blockly 是一款基于Web的、开源的、可视化程序编辑器。你可以通过拖拽块的形式快速构建程序,而这些所拖拽的每个块就是组成程序的基本单元。可视化编程完成,Blockly 直接支持 JavaScript、Python、PHP、Lua、Dart 语言源码的导出。此外,还可以将 Blockly 编辑器快速集成到Web、Android或iOS环境中

    2020/04/05
  • Vue服务端渲染基础教程_渲染使用帮助

    一、服务端渲染 – 简介所谓服务端渲染就是将代码的渲染交给服务器,服务器将渲染好的html字符串返回给客户端,再由客户端进行显示。服务器端渲染的优点有利于SEO搜索引擎优化,因为服务端渲染是将渲染好的html字符串返回给了客户端,所以其可以被爬虫爬取到;加快首屏渲染时间,不会出现白屏;服务器端渲染的缺点SSR会占用更多的CPU和内存资源Vue中一些常用的浏览

    2020/03/26
  • virtual DOM是如何优化性能的?小白入门_dom菜鸟指南

    谈到virtual DOM 前先来说说浏览器渲染的流程浏览器接收到html文件,并转换成DOM树。如果有css还会生成css树。如果遇到script标签,会先判断是async或defer。如果是前者会并行下载并执行js,后者会先下载,等html解析完后顺序执行。
    当构建后dom树和css树后,开始构建render树。这一步就是确定页面布局和样式,在生成ren

    2020/03/29