chrome系列-扩展程序开发学习-js内嵌

简介: 需求:可能会有在页面加载的时候想执行某个js,例如统计页面的DOM等等。
需求:可能会有在页面加载的时候想执行某个js,例如统计页面的DOM等等。

那么这里就需要用到content_scripts.

在这之前,先放一个类似通用的模版,基本上大部分的扩展程序都可以在上面修改。

manifest.json配置

{
    "manifest_version":2,
    "app":{
        "background":{
            "scripts":["background.js"]
        }
    },
    "name":"your extension name",
    "version":"1.0",
    "default_locale":"en",
    "description":"your extension description",
    "icons":{
        "16":"img/icon16.png",
        "48":"img/icon48.png",
        "128":"img/icon128.png"
    },
    "browser_action":{
        "default_icon":{
            "19":"img/icon19.png",
            "38":"img/icon38.png"
        },
        "default_title":"extension title",
        "default_popup":"popup.html"
    },
    "page_action":{
        "default_icon":{
            "19":"img/icon19.png",
            "38":"img/icon38.png"
        },
        "default_title":"extension title",
        "default_popup":"popup.html"
    },
    "background":{
        "scripts":["background.js"]
    },
    "content_scripts":[
        {
            "matches":["http://www.byyui.com/*"],
            "css":["mystylesheet.css"],
            "js":["jquery.js","myjs.js"]
        }
    ],
    "options_page":"option.html",
    "permissions":[
        "*://www.gstyle.com/*"
    ],
    "web_accessible_resources":[
        "img/*.png"
    ]
}

以上这个基本上能满足大部分的扩展需求,以后在开发,可以在这上面进行删减。不认识没关系,一个一个的来练习。

这一节用到的就是content_scripts.操作用户正在浏览的页面。

通过content_scripts可以指定将哪些脚本文件注入到哪些页面中,用户访问可以,对应的脚本会自动执行,从而对DOM进行操作。

简单说下content_scripts里面的属性:

content_scripts 是一个数组,数组里面是对象,对象中包含的字段有:
- matches
- exclude_matches
- css 
- js
- run_at
- all_frames
- include_globs
- exclude_glbos
对应的含义是:
- matches 定义哪些页面会被注入脚本
- exclude_matches 定义哪些页面不会被注入脚本
- css ,js 定义注入的样式和js文件
- run_at 定义了何时注入
- all_frames 定义脚本是否会注入到frame框架中
- include_globs 和 exclude_globs 则是全局URL匹配。最终脚本是否会被注入到哪些页面中是由matches exclude_matches include_globs exclude_globs 的值共同决定。

其中要注意的是:__脚本的变量和浏览页面的变量是不通的。__

OK,那么我们现在来做一个最简单的控制,在某个url浏览器在控制台打印出我们的字符串。

manifest.json 如下:

{
    "manifest_version":2,
    "name":"DOM - DEMO",
    "version":"1.0",
    "description":"操作DOM 练习",
    "content_scripts":[
        {
            "matches":["http://*.byyui.com/"],
            "js":["demo.js"]
        }
    ]
}
demo.js
console.log('my extension print log')

由于没有页面,我们只需要这些就足够了。
chrome浏览器加载后,我们浏览 http://www.byyui.com 就会发现控制台已经打印出我们的字符串了。

示例图

后续例子:跨域请求数据

相关文章
|
15天前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
23天前
|
JSON 前端开发 JavaScript
|
8天前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
22天前
|
JavaScript 前端开发 iOS开发
学习强大的JavaScript一行代码,能够节省你的时间和代码量
这段内容介绍了25个实用的JavaScript一行代码技巧,涵盖复制内容到剪贴板、打乱数组、颜色值转换、计算平均值、检查数字奇偶性、数组去重、对象为空检测、字符串反转、日期计算、首字母大写、生成随机字符串、四舍五入、清除Cookie、检测暗黑模式等,帮助开发者提高效率并简化代码。
17 2
|
24天前
|
JavaScript 前端开发 小程序
基于js开发快速学习鸿蒙基础
【8月更文挑战第26天】
34 1
|
26天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
44 1
|
29天前
|
存储 JavaScript 前端开发
学习JavaScript 内存机制
【8月更文挑战第23天】学习JavaScript 内存机制
22 3
|
30天前
|
JSON JavaScript 前端开发
JS 和 ES6 补充学习
【8月更文挑战第21天】
31 4
|
1月前
|
前端开发 JavaScript 程序员
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景
|
1月前
|
JavaScript 前端开发
Javascript学习
Javascript学习