将一个前端项目改写为chromo插件（一）

最新推荐文章于 2024-05-01 22:48:44 发布

weixin_34208185

最新推荐文章于 2024-05-01 22:48:44 发布

阅读量184

点赞数

文章标签：前端 json ui ViewUI

原文链接：https://juejin.im/post/5b0a9ba5f265da0dd716963d

版权

编写第一个chrome插件?

编写chrome插件完全就是前端知识加上一些专门的知识。假设pj1文件夹下有文件index.html

<!DOCTYPE html>
<html>
<head>
    <title>Hi</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="main">
    	hello,world
    </div>
   <script type="text/javascript">
        setTimeout(()=>{
            document.getElementById("main").innerText = "hi,saltfish"
        },1000)
   </script>
</body>
</html>
复制代码

嗯，现在看来他只是普通的html，其实，你只要在当前文件夹下加上manifest.json文件，chrome浏览器就可以把它识别为插件，成为浏览器右上角的小图标。

如何什么是`manifest.json`，如何编写？

manifest 是货单的意思，这个文件就是chrome规定的的插件配置文件的名称

{
	"name": "My Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "index.html"
    }
}
复制代码

name、version不用解释，manifest_version类似与XML的schema文件，用来约束manifest_version自身的格式，目前，它的值永远是2。

而default_popup作用：当用户点击插件的小图标后，显示的画面，就是把它所引用的HTML渲染后得到的。

如何发布？

在chrome浏览器访问 chrome://extensions/ 就会看到

点击 LOAD UNPACKED 再选取存放文件的文件夹即可。你会立刻在浏览器又上角看到自己的插件。点击后会显示index.html对应的内容

为了统一规范，我们可以把index.html改名为popup.html,同时记得修改"default_popup"的值

关于popup.html

我们可以看到，chrome插件的UI是用HTML编写的（相应的脚本也是js写得），所以chrome插件对我们前端开发者来说非常好学。

每当我们点击小图标时，chrome就会读取配置文件中定义的HTML文件。

在chrome插件的UI中，没有title等的概念，所以我们可以吧一些没用的标签给删除掉。

css文件和一般前端一模一样

在`style.css``添加

body{
    width: 300px;
    height: 300px;
    background-color: antiquewhite;
}
复制代码

(记得在popup.html中引用哦) 在刷新插件，可以看到

js脚本

细心的同学可能注意到，在之前的popup.html中明明有脚本

<script type="text/javascript">
    setTimeout(()=>{
        document.getElementById("main").innerText = "hi,saltfish"
    },1000)
</script>
复制代码

为什么页面一直不刷新？因为chrome官方规定js脚本只能引入，不能嵌入HTML（我也不知道为什么这样规定）添加标签<script src="script.js"></script>并将脚本移动到对应位置，再刷新插件，你就可以看到正确的结果了。

这里的js脚本和一般的js环境相同，不过console.log 不能用，因为chrome也不知往哪里打印结果，不过你可以使用alert函数来调试代码。

popup.html的生命周期

该文件在用户点击小图标后加载，和你打开一般的网页一模一样，只不过对应的UI显示在浏览器的右上角，每当你点击其他地方chrome就会关闭这个窗口，对应的js环境也会被销毁，也就是说，你每次点击小图标，就会重新渲染HTML和css，并重新运行js代码。

正是因为这个特性，popup.html以及他引入的js脚本，只处理UI相关。一些业务逻辑放在其他地方，下面来介绍

确认下目录结构

$ tree
.
├── manifest.json
├── popup.html
├── script.js
└── style.css
复制代码

$ cat manifest.json
{
    "name": "My Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "popup.html"
    }
}
复制代码

background.js

将manifest.json修改为：

{
	"name": "My Extension",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": {
            "19": "images/icon19.png"
        },
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": [
            "background/bg.js"
        ]
    }
}
复制代码

并添加background/bg.js文件, background字段定义的js代码在打开浏览器时执行，知道浏览器关闭。

setInterval(()=>{
    alert((new Date()).toDateString())
},2000)
复制代码

在bg.js添加上述代码，发现浏览器一经加载，就不停弹出对话框，不管是否点击了小图标，不管你做了什么操作，他都是一直执行。

现在注释上述代码

content_scripts

有时候我们的插件希望做到：当用户打开某个网页后，再进行操作。比如用户打开github.com后，弹出“hi,it is github”。如何实现呢再manifest.json添加:

"content_scripts": [
        {
            "matches": ["*://github.com/*"],
            "js": ["content/github.com.js"]
        }
    ]
复制代码

并添加相应文件，在js代码中写上

alert("hi,it is github")
复制代码

content_script是个数组，定义了一些url与script的联系，当当用户访问相应的网址的时候，chrome会等待页面加载完成后，执行相应的js代码。

content_script可以访问当前页面的dom和localstorage，但是无法访问当前页面的js变量

content_script在每次加载相匹配的页面后执行，页面被刷新后对应的content_script也会被重行执行。

三种js环境

我们看到，我们之前提及了三种js环境、background.js,content_script,popup.html引用的，现在来捋一捋他们的关系和区别

内容	background.js	content_script	popup.js
生命周期	浏览器加载后一直执行	打开相应url后执行	每次点击图标后执行
dom	没有能操作的dom	能读取当前页面dom	popup.html的dom
js变量	如果有多个bg.js,并列脚本间不共享js变量	与原生页面的js变量隔绝，如果多个content_script匹配到同一个url，他们的一直执行，js变量依旧隔绝
localstorage	每一个插件对应一个localstorage，被不同的bg.js共享	和当前url的localstorage共享	和当前插件共享（这是bg.js和popup.js一种通信方式）

这几点是我自己在学习中，不断测试，得到这几点结论（测试过程就不写了，很容易想到）。

确认下目录

$ tree
.
├── background
│   └── bg.js
├── content
│   └── github.com.js
├── manifest.json
├── popup.html
├── script.js
└── style.css
复制代码

页面间通讯

之前，说过，各中js代码中的变量是不共享的，那么我们如何让他们通讯呢？比如，当用户访问github.com时，让content_script向bg.js 说一声hello？ chrome设计了一个接口api：在github.com.js:

let message = "hello"
chrome.runtime.sendMessage(message, function(response){
    console.log(response)
});
复制代码

bg.js

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
    alert(message)
    sendResponse({content:"hi,it is bg.js"})
});
复制代码

刷新插件并打开github，发现弹出“hello",对应github页面控制台也打印出{content:"hi,it is bg.js"}

可以看到：整个过程类似于HTTP请求，content_script发起一个请求，bg.js回应。而且运行直接传递js变量

结语

好了这几点是前置知识，下一篇文章来改造一个前端项目。

weixin_34208185

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
将一个前端项目改写为chromo插件（一）

编写第一个chrome插件?编写chrome插件完全就是前端知识加上一些专门的知识。假设pj1文件夹下有文件index.html&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;Hi&lt;/title&gt; &lt;meta charset="utf-8"/&gt; &lt;lin
复制链接

扫一扫