原文地址：How to Build a Simple Chrome Extension in Vanilla JavaScript

开发一个Chrome扩展程序非常简单，只需要使用原生的js就可以完成，在本文中，我将在几分钟内引导你完成一个简单的扩展程序

关于Chrome扩展程序

Chrome 扩展程序本质上只是一组可以自定义 Google Chrome 浏览器体验的文件。Chrome 扩展程序有几种不同的类型；有些在满足某个特定条件时激活，例如当你来到商店的结账页面时；有些只在你点击图标时弹出；还有些每次打开新标签时都会出现。今年我发布的两个扩展程序都是“新标签”类型的；第一个是 Compliment Dash，这是一个用于保存待办事项列表并赞美用户的 dashboard，第二个是 Liturgical.li，一款针对牧师的工具。如果你知道如何开发简单的网页，那么你就可以毫不费力地开发这类扩展程序。

创建项目文件

首先需要创建一个目录，在目录下创建  index.html,   main.css,  main.js,  manifest.json

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Dashboard</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>

<body>

    <h1>hi，欢迎您</h1>

    <script src="main.js"></script>

</body>

</html>

manifest.json

要在Chrome上运行扩展程序，就必须要一个 manifest.json 文件，你可以在Google的开发人员网站上下载该文件，也可以直接新建 manifest.json文件，并将下面的代码复制进去

{

  "name": "Getting Started Example",

  "version": "1.0",

  "description": "Build an Extension!",

  "manifest_version": 2

}

现在我们更改这段代码的配置

{

  "name": "Simple Greeting Dashboard",

  "version": "1.0",

  "description": "This Chrome extension greets the user each time they open a new tab",

  "manifest_version": 2

  "incognito": "split",

  "chrome_url_overrides": {

    "newtab": "index.html"

  },

  "permissions": [

     "activeTab"

   ]

}

更多其他选项请参考 Chrome开发者文档。

"incognito": "split" 字段会告知 Chrome 在处于隐身模式时如何处理这个扩展程序。

"chrome_url_overrides" 告诉 Chrome 每次打开新标签时都会打开 index.html

"permissions" 的值会在用户试图安装这个扩展程序时，向用户提供一个弹框提示，让他们知道这个扩展程序将覆盖他们的新标签。

上传文件

通过以上信息，你就可以创建自己的新标签Chrome扩展程序，在自定义manifest.json 文件后，你可以通过HTML、CSS、JavaScript设计你想要的任意类型的新标签

当你完成以上配置之后，开始上传，打开 chrome://extensions/ 并切换右上角的开发者模式，将其处于开启状态

刷新页面，点击  加载已解压的扩展程序

选择你存储该文件的目录，打开就可以了，导入成功之后会出现一个新的扩展程序

这样在每次打开新标签都会出现你创建的页面

如何用原生js开发一个Chrome扩展程序的更多相关文章

  1. 跟我一起写一个chrome扩展程序

    在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思. 就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿. 先看效果图 实际运用要和现实联系在一起,经历和 ...

  2. 前端每日实战：116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPjWvw 可交互视频 此视频是可 ...

  3. 如何开发一个chrome扩展

    chrome是一个不错的浏览器,web开发者工作中一般都会使用chrome做为默认浏览器,它有很多扩展,给浏览器补充了各种功能,增强了用户体验.chrome具体能干什么?怎么做出来的呢? chrome ...

  4. 自己写一个chrome扩展程序 - 右键菜单扩展

    最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...

  5. 如何用原生JS实现一个简单的promise

    我又又又回来了,最近真是累的跟狗一样,急需一个大保健回复一下子精力 我现在是一边喝着红牛一边写着博客,好了好了,不扯了,回归整体好吧 先简单来说一下啥是promise吧 它是什么?Promise是一个 ...

  6. Google Chrome 扩展程序开发

    根据公司的规定,每月八小时,弹性工作制.所以大家平时来的不太准时,如果有事,下班也就早些回去了.所以一个月下来工作时间可能不够,但是公司的考勤日历是这样的: 除了请假和法定节假日外,其他样式显示都是一 ...

  7. chrome扩展程序开发之在目标页面运行自己的JS

    大家都知道JS是运行在客户端的,所以,如果我们自己写一个浏览器的话,是一定可以往下载下来的网页源代码中加入js的.可惜我们没有这个能力.不过幸运的是,chrome的扩展程序可以帮我们做到这件事. 本文 ...

  8. chrome扩展程序开发之在目标页面执行自己的JS

    大家都知道JS是执行在client的.所以,假设我们自己写一个浏览器的话.是一定能够往下载下来的网页源码中加入js的.可惜我们没有这个能力.只是幸运的是,chrome的扩展程序能够帮我们做到这件事. ...

  9. 推荐一个有趣的Chrome扩展程序-查看任意网站的开发技术栈

    对于前端开发人员来说,目前的前端框架层出不穷,最受欢迎的莫过于所谓的前端框架三驾马车:Angular, React和Vue.在学习的过程中,肯定好奇现在的互联网公司的网站用的何种前端框架来开发的. C ...

随机推荐

  1. Resnet-34框架

    import torch import torch.nn as nn import torch.nn.functional as F class ResidualBlock(nn.Module): ' ...

  2. Access查询时间段 .

    access数据库cmd // SendTime是在Access数据库中是文本类型 StringBuilder sb = new StringBuilder(); sb.Append("SE ...

  3. Win10下安装zio

    0x00 报错:capstone.dll缺失,就算用pip安装也不行. 推荐:kali下安装pwn,pwntools,zio

  4. python 多个脚本

    1.增删改查haproxy.conf配置文件 1.查询输入:www.oldboy1.com 2.删除输入:{'backend': 'www.oldboy2.org','record':{'server ...

  5. redis列表操作基本命令

    RPUSH:从列表尾部插入一个元素,RPOP:返回列表最后一个元素并从列表删除LPUSH:从列表头部插入一个元素,LPOP:返回列表第一个元素并从列表删除(没看到命名的介绍,个人理解R就是right, ...

  6. copy GC 和 mark & compaction GC的算法异同

    先标记 然后 copy GC是,对所有child,判断, 如果child没有被访问过,那么拷贝到新地址,child的forwording指向新地址,child标记为已访问,把自己对child的引用改为 ...

  7. 带通滤波 matlab

    巴特沃斯:1.带阻滤波器设计带阻滤波器指标:阻带上边界频率:5Kz:阻带下边界频率:7Kz:通带上边界频率:2Kz:通带下边界频率:9Kz:通带最大衰减:1dB:阻带最小衰减:20dB:设计程序如下: ...

  8. 剑指Offer 34. 第一个只出现一次的字符 （字符串）

    题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). 题目地址 https:// ...

  9. 自动化测试-5.python基本语法

    # encoding=utf-8 import sys import time # 我想从键盘输入信息 name ='' #赋值为空 print name #输出空 name=raw_input(&q ...

  10. node 创建server 及加载静态页面

    1.Demo.js    创建Server let  http = require('http'); let url = require("url"); let util = re ...