在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思。

就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿。

先看效果图

实际运用要和现实联系在一起,经历和知识的体系不断的关联,才不会忘记
学习的知识如果在现实工作中没有用到,就会淡忘它。经历要达到一定的程度,项目要达到一定的阶段

![](https://img2018.cnblogs.com/blog/1037363/201901/1037363-20190112152353161-773017152.png)
![](https://img2018.cnblogs.com/blog/1037363/201901/1037363-20190112152621701-65007328.png)
这个就是一个很简单的例子,当我们输入facebook网站,就会弹出一个弹框,然后我们输入名字,这个网站就会被我们输入的名字所代替。
这个网站换成随便什么网站都是可以的。接下来我们来实现这个small扩展程序吧。
新建文件夹写入如下文件
```html

for devTools

```
```js
var userName=prompt('Hello,what\syour name');
document.body.innerHTML='hello'+userName+'!';
```
```json
{
"manifest_version":2,
"name":"kittenbook",
"description":"replace photos on facebook with kittens",
"version":"0.0.1",
"content_scripts":[
{
"matches":["*://www.facebook.com/*"],
"js":["kittenbook.js"]
}
]
}
```
接下来将我们的小demo变成chrome扩展程序吧
![](https://img2018.cnblogs.com/blog/1037363/201901/1037363-20190112153635093-488472588.png)

这个非常有意思的小demo是我从learning to program 一路编程这本书上看到的。

其实用一些很简单的代码就可以实现一些很有意思的玩意儿。

跟我一起写一个chrome扩展程序的更多相关文章

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

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

  2. 如何用原生js开发一个Chrome扩展程序

    原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...

  3. 如何通过写一个chrome扩展启动本地程序

    @(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...

  4. Google Chrome 扩展程序开发

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

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

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

  6. 编写Chrome扩展程序

    Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看 ...

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

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

  8. 我的第一个chrome扩展(1)——读样例,实现时钟

    学习chrome扩展开发: 与网页类似,需要的知识:html,javascript chrome扩展程序的构成: manifest.json:对扩展程序的整体描述文件 { "manifest ...

  9. 【转】编写Chrome扩展程序

    Chrome的扩展程序很多,也很容易入门,可以来简单实现一下 看看,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html文件 js文件 其他文件等 可以看 ...

随机推荐

  1. docker上安装ActiveMQ

    1.查看是否已经存在镜像 docker images 2.搜索镜像 docker search activemq 3.拉取镜像 docker pull webcenter/activemq 4.构建容 ...

  2. Vue项目在Docker的自动化部署

    操作系统:CentOS 部署环境:Docker CI/CD工具:Jenkins 1.环境配置 安装Jenkins:Centos安装Jenkins 安装Docker:Centos安装Git.DotNet ...

  3. nodejs实现读取文件

    今天后端同事下班,想让我读取一个文件的内容.我想这个是小忙啊,就立马答应了. 我知道这个是nodejs读取,可是我又想,平时我们都要起一个服务才能够运行node服务器, 比如如下代码 var http ...

  4. Android开发 EditText的开发记录

    设置显示内容与隐藏内容 if (isChecked){ editPassword.setTransformationMethod(HideReturnsTransformationMethod.get ...

  5. 2016.11.5初中部上午NOIP普及组比赛总结

    2016.10.29初中部上午NOIP普及组 这次比赛算是考的最差的一次之一了,当中有四分之三是DP. 进度: 比赛:没分+0+没分+40=40 改题:AC+0+没分+40=140 TurnOffLi ...

  6. ThreadLocal简析

    简介 ThreadLocal在Java多线程开发中常见的一个类,在面试中也经见的问题,比如ThreadLocal的作用是什么,ThreadLocal的实现原理是什么等等.ThreadLocal是jav ...

  7. SpringData_04_ JPA中的一对多

    1.JPA中的一对多 在一对多关系中,我们习惯把一的一方称之为主表,把多的一方称之为从表.在数据库中建立一对多的关系,需要使用数据库的外键约束. 什么是外键? 指的是从表中有一列,取值参照主表的主键, ...

  8. 元素显示v-show

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  9. 从xmlns的作用说起

    查了资料和自己实践后,得出了一些关于xml和xmlns的结论 看一个最常见的javaweb 中xml配置文件的开头: <?xml version="1.0" encoding ...

  10. div 和 span 标记

    div 一般和 css 配合使用  <div>是一个块元素 span  也是和 css 配合使用 <span>是一个行内元素 标记嵌套是  一般是块元素嵌套行内元素 1 块元素 ...