Chrome Extension 扩展程序 小白入门

时间：2023-06-03 16:48:14

Chrome Extension 扩展程序

阅读前的说明：本文适用于之前从来没有接触过chrome extension扩展程序的同学~

编写demo

创建项目文件夹chrome_ext_demo，在项目根路径（chrome_ext_demo/）下创建 manifest.json

在manifest.json中添加如下示例（只是个简单例子，详细字段说明可参考官方文档）：

{

    "name":"Chrome Extension demo",

    "version":"1.0.0",

    "manifest_version": 2,

    "description":"Hello chrome extension.",

    "browser_action":{

        "default_icon":"icon.png",

        "default_popup":"popup.html"

    },

    "web_accessible_resources":[

        "icon.png",

        "popup.js"

    ],

    "content_scripts": [

        {

            "matches": ["*://xxx.com/xxx/*"],

            "js": ["content.js"]

        }

    ]

}

小小说明一下：

manifest_version的值必须是2，content_scripts.matches这个数组中的值表示我们希望匹配的域名，以*://baidu.com/*为例，这个表示只要域名是baidu.com，不论协议是什么，不论路径是什么，这个插件都生效~

根据web_accessible_resources和content_scripts中填写的icon.png、popup.html、popup.js、content.js文件路径得知，我们需要在chrome_ext_demo/下创建以下3个文件（PS：图片偷了下懒，随便找了一张图，不规范>.<）。

在popup.html添加如下代码：

<!DOCTYPE html>

<html>

<head>

    <style>

        body{

            width:350px;

        }

        div{

            border:1px solid #eeeaaa;

            padding:20px;

            font: 20px normal helvetica,verdana,sans-serif;

        }

    </style>

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

</head>

<body>

    <div>123</div>

</body>

</html>

在popup.js添加如下代码：

function sayHello(){

    var message = document.createTextNode("Hello chrome extension!");

    var out = document.createElement("div");

    out.appendChild(message);

    document.body.appendChild(out);

}

window.onload = sayHello;

在content.js添加如下代码：

alert('hi content!');

其中，content.js是作用在目标域名目标路径（*://xxx.com/xxx/*）下的页面上的。

运行

打开chrome浏览器，进入chrome://extensions/，打开开发者模式，点击【加载已解压的扩展程序】，选中chrome_ext_demo文件夹，引入扩展

打包

在chrome://extensions/页面上，点击【打包扩展程序】，选中我们需要打包的扩展程序根目录，点击打包即可。

demo地址

欢迎访问我的github仓库进行下载：https://github.com/silencetea/demo-market/tree/master/chrome_ext_demo

本文链接：https://www.cnblogs.com/xsilence/p/10224499.html

相关文章