码迷,mamicode.com
首页 > 其他好文 > 详细

Chrome Extension 扩展程序 小白入门

时间:2019-01-05 16:42:45      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:根据   xxx   选中   oct   地址   content   font   onload   http   

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_resourcescontent_scripts中填写的icon.pngpopup.htmlpopup.jscontent.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

Chrome Extension 扩展程序 小白入门

标签:根据   xxx   选中   oct   地址   content   font   onload   http   

原文地址:https://www.cnblogs.com/xsilence/p/10224499.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!