在我没有看这本书之前,我都想象不到,原来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. POJ 3449 /// 判断线段相交

    题目大意: 给出多个多边形及其编号 按编号顺序输出每个多边形与其相交的其他多边形编号 注意一个两个多个的不同输出 将每个多边形处理成多条边 然后去判断与其他多边形的边是否相交 计算正方形另外两点的方法 ...

  2. JAVA中日期 yyyy-MM-dd HH:mm:ss和yyyy-MM-dd hh:mm:ss的区别

    HH是24小时制,hh是12小时制 区别就是:大写的H是二十四小时制的小时数(0-23),小写的h是十二小时制的小时数(am/pm 1-12) //24小时制 SimpleDateFormat sdf ...

  3. 关于jar包启动遇到的问题

    一.找不到propertites文件,错误如下 原因是打成的jar不包含classpath信息,需要运行时指定,命令为 -Xbootclasspath/a: 后缀在核心class搜索路径后面.常用! ...

  4. 关于电容与Q值

    1, 电容模型 电容阻抗可以表示为: 可算得自谐振频率点为: 在该点,容抗与感抗差为0,电容表现出纯电阻性. 2, 阻抗曲线 自谐点是区分电容器呈容性还是感性的分界点.从阻抗曲线看,在自谐点附近阻抗较 ...

  5. vue-draggable-resizable 拖拽缩放插件

    安装: npm install --save vue-draggable-resizable 使用: <template>   <div style="height: 50 ...

  6. strict

    strict为3.2.3新增连贯操作,用于设置数据写入和查询是否严格检查是否存在字段.默认情况下不合法数据字段自动删除,如果设置了严格检查则会抛出异常. 例如: $model->strict(t ...

  7. Mysql引擎MyISAM和InnoDB的区别

    InnoDB的数据存储在表空间中,表空间是由InnoDB管理的一个黑盒子,由一系列的数据文件组成.InnoDB可以将每个表的数据和索引存放在单独的文件中. InnoDB采用MVCC来支持高并发,并且实 ...

  8. linux top命令VIRT,RES,SHR,DATA的含义(转)

    linux top命令VIRT,RES,SHR,DATA的含义 字体: 大 小Posted by 佚名 | tags: top  VIRT  RES  SHR VIRT:virtual memory ...

  9. JS Math.sin() 与 Math.cos() 用法 (含圆上每个点的坐标)

    Math.sin(x)      x 的正玄值.返回值在 -1.0 到 1.0 之间: Math.cos(x)    x 的余弦值.返回的是 -1.0 到 1.0 之间的数: 这两个函数中的X 都是指 ...

  10. Java中的String真的无法修改吗

    Java中String一旦赋值将无法修改,每次对String值的修改都是返回新的String. 如何在不创建新的String对象的情况下,对String的值进行修改呢? String类中的包含一个字段 ...