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 就会发现控制台已经打印出我们的字符串了。

示例图

后续例子:跨域请求数据

相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
73 1
|
28天前
|
Web App开发 人工智能 JSON
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
AutoMouser是一款Chrome扩展程序,能够实时跟踪用户交互行为,并基于OpenAI的GPT模型自动生成Selenium测试代码,简化自动化测试流程。
138 17
AutoMouser:AI Chrome扩展程序,实时跟踪用户的浏览器操作,自动生成自动化操作脚本
|
3月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
74 5
|
3月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
45 2
|
3月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
68 1
|
3月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
508 9
|
3月前
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
290 0
|
4月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
52 2
|
4月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
58 1
|
4月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
89 0

热门文章

最新文章