跟我一起写一个chrome扩展程序(代码片段)

smart-girl smart-girl     2022-11-28     562

关键词:

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

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

技术分享图片
技术分享图片
这个就是一个很简单的例子,当我们输入facebook网站,就会弹出一个弹框,然后我们输入名字,这个网站就会被我们输入的名字所代替。
这个网站换成随便什么网站都是可以的。接下来我们来实现这个small扩展程序吧。
新建文件夹写入如下文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>for devTools</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="./kittenbook.js"></script>
</body>
</html>
var userName=prompt('Hello,whatsyour name');
document.body.innerHTML='hello'+userName+'!';

    "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扩展程序吧
技术分享图片

这个非常有意思的小demo是我从learning to program 一路编程这本书上看到的。
其实用一些很简单的代码就可以实现一些很有意思的玩意儿。

自己写一个chrome扩展程序-右键菜单扩展(代码片段)

...划词翻译。下载几个扩展程序提示不安全!好吧,自己写一个!开放的体系就是好!百度搜一下好多的例子,不过几乎都没说background 查看详情

小说脑洞:《你跟我在一起,就为了让我教你写代码?》

  简介:一个其貌不扬的女程序员(很厉害),被一个帅哥疯狂追求,原因竟然是为了学写代码?   风格:教学类。   篇幅:中篇。  开篇:一个帅哥偶遇一个女程序员(很厉害!),为了学... 查看详情

跟我一起写makefile

概述——什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的程序员,makefile还是要懂。这就好像现在有这么多的HTML的编辑器,但如果你想成... 查看详情

跟我一起写makefile:概述

什么是makefile?也许非常多Winodws的程序猿都不知道这个东西。由于那些Windows的集成开发环境(integrateddevelopmentenvironment,IDE)都为你做了这个工作,但我认为要作一个好的和professional的程序猿,makefile还是要懂。这就好像如今有这么... 查看详情

跟我一起从入门到精通go(代码片段)

go安装环境下载go并运行第一个go程序go25个关键字breakcasechanconstcontinuedefaultdeferelsefallthroughforfuncgogotoifimportinterfacemappackagerangereturnselectstructswitchtypevar并发编程之同步原语sync包sync.Mutex在共享资源上不能同时访问sync.RW 查看详情

跟我一起从零开始一个预告片电影网站(代码片段)

...进步呀第一步mkdirdouban-trailer-imooccddouban-trailer-imooc第二步跟我一起在git中输入npminit记得比较重要的地方是entrypoint:(index.js)server/index.js第三步mkdirservercdservertouchindex. 查看详情

跟我一起用symfony写一个博客网站;

第一步:composercreate-projectsymfony/framework-standard-edition你的项目名;创建完这个原型,我执行phpbin/consoleserver:run,可以跑起来;那么此刻你需要连接数据库了:我的数据库是PostgreSql写一个数据库创建脚本例如我的createusermyblogwithpass... 查看详情

如何给selenium.chrome写扩展拦截或转发请求(代码片段)

...于自动测试Web应用程序,利用它可以通过代码来控制chrome浏览器!有时候我们需要mock接口的返回,或者拦截和转发请求,今天就来实现这个功能代码已开源:https://github.com/yuzd/OpenQA.Selenium.Chrome.Fiddle 查看详情

跟我一起写makefile

书写规则————规则包含两个部分,一个是依赖关系,一个是生成目标的方法。在Makefile中,规则的顺序是很重要的,因为,Makefile中只应该有一个最终目标,其它的目标都是被这个目标所连带出来的,所以一定要让make知道你... 查看详情

一种开发chrome扩展程序的新姿势(代码片段)

...序,来辅助提升团队的开发体验和效率。本文首先会展示一个实际开发扩展程序的例子,从而 查看详情

nmake文件学习记录看《跟我一起写makefile》

1、陈皓《跟我一起写Makefile》makefile带来的好处就是——“自动化编译”,一旦写好,只需要一个make命令,整个工程完全自动编译,极大的提高了软件开发的效率。make是一个命令工具,是一个解释makefile中指... 查看详情

nmake文件学习记录看《跟我一起写makefile》

1、陈皓《跟我一起写Makefile》makefile带来的好处就是——“自动化编译”,一旦写好,只需要一个make命令,整个工程完全自动编译,极大的提高了软件开发的效率。make是一个命令工具,是一个解释makefile中指... 查看详情

跟我一起写makefile:使用函数

跟我一起写Makefile:使用函数 两个排版不一样书籍下载书籍下载 查看详情

阿里面试居然跟我扯了半小时的cyclicbarrier(代码片段)

一个大腹便便,穿着格子衬衫的中年男子,拿着一个贴满Logo的Mac向我走来,看着稀少的头发,我心想着肯定是顶级技术大牛吧!但是我也是一个才华横溢的人,稳住我们能赢。面试官:您好,先做一下自我介绍吧!我:您好,... 查看详情

彻底禁用chrome的“请停用以开发者模式运行的扩展程序”提示(代码片段)

...w.cnblogs.com/liuxianan/p/disable-chrome-extension-warning.html前言作为一个前端程序员,难免会有一些专属自己的小扩展,没必要每一个都发到Chrome应用商店去,虽然可以勾选“开发者模式”来运行本地插件,但是每次启动都会有一个烦人的... 查看详情

跟我一起写makefile

使用变量————在Makefile中的定义的变量,就像是C/C++语言中的宏一样,他代表了一个文本字串,在Makefile中执行的时候其会自动原模原样地展开在所使用的地方。其与C/C++所不同的是,你可以在Makefile中改变其值。在Makefile中,... 查看详情

chrome扩展程序获取所选文字(代码片段)

...加到我的Chrome扩展程序中。我想要前。在FacebookFeed中选择一个文本,当我点击我的图标时,它将获取它并在我的扩展程序中显示所选文本。我到目前为止得到了这个:chrome.tabs.executeScript(null,code:"alert(window.getSelection().toString());")... 查看详情

text新标签样式-chrome插件扩展程序(代码片段)

查看详情