Chrome Extension 入门教程（四）调试

最新推荐文章于 2024-05-11 10:44:19 发布
最新推荐文章于 2024-05-11 10:44:19 发布
阅读量2.1k 收藏
点赞数
分类专栏： Chrome Extension
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42194433/article/details/114177563
版权

三种脚本

弹出页脚本：popup

后台脚本：backgroup

内容脚本：contentscript

popup.js

插件图标，点击右键，再点击“审查弹出内容”

图片

就可以下断点调试了

图片

background.js

控件界面，点击查看视图后面的“xxx”

图片

就可以下断点调试了

图片

content script

按F12进入调试模式，点击打开文件（open file）

图片

输入要调试的js文件名字

图片

就可以下断点调试了

图片

kongkong5020
关注
专栏目录
Chrome插件开发入门
m0_67400973的博客
08-01 3898
content_scripts是在web页面运行的JavaScript脚本，通过使用标准的DOM，它可以获取浏览器访问页面的详细信息，并可以修改这些信息。1、获取DOM元素2、修改DOM元素3、修改样式1、不能使用除了chrome.extension之外的chrome.*接口2、不能访问它所在扩展中定义的函数和变量3、不能访问web页面和其他content_scripts中定义的函数和变量4、不能做cross_siteXMLHttpRsquest。...
generator-chrome-extension-simple:Yeoman 生成器，用于创建简单的 Chrome 浏览器扩展
06-16
首先创建一个新目录，然后cd进入其中： mkdir my-new-chrome-extension && cd $_ 安装生成器： npm install -g generator-chrome-extension-simple 运行： yo chrome-extension-simple 需要有关 Chrome 扩展程序...
ChromeExtensionTest:测试选项。
06-25
Chrome 扩展测试 测试选项.. 测试密码字段可读性 测试与其他会话共享插件数据 测试通知
chrome扩展开发调试
超频化石鱼的博客
07-09 3084
chrome扩展由content scripts，browser actions，background等多个部分组成。其中，content scripts属于注入web页面，所以在contentscripts中的console.log会被正确打印在web页面的控制台中。然而，除content scripts外的其他组成部分调用console.log，是不会被打印在web页面控制台中的。这是因为每个...
调试Chrome 扩展
kiku
12-13 1045
本篇：对调试扩展有了基本的了解。 扩展可以利用 Chrome DevTools 为网页提供的调试功能，它带有独特的行为属性，是一个专业的扩展调试器，能够让我们了解拓展的行为、扩展组件之间的工作方式以及如何处理 bug。 导航到 chrome 扩展管理页面chrome://extensions并确保开发人员模式处于开启状态。 如果拓展有错误会出现三个按钮：详细信息、删除和错误。 点击错误按钮可以看到具体的错误信息 打开调试面板 可以通过选择查看视图旁边的蓝色链接打开 Chrome DevTools 面板。.
在半小时内从无到有开发并调试一款Chrome扩展（Chrome插件/谷歌浏览器插件）
刘悦的技术博客
04-15 1704
就在不久之前，我们目前这个毕业班的班长那日同学和我说，他正在公司开发Chrome扩展，看起来很高大上的技术，实际开发却非常简单，这引起了我非常浓厚的兴趣，正所谓技不压身，检验自身技术的手段之一就是拥抱新事物，这一次我们尝试在半小时内开发一款Chrome扩展，因为之前我们做了一个微信小程序的在线面试题题库的项目，所以正好利用这个题库将面试题平移到Chrome扩展上面。开发完毕之后，我们还可以在扩展页面对你的项目进行打包，打包好的扩展为一个crx文件，这样就可以进行拖拽安装了。”配色，看起来是这个样子的。
Chrome插件开发与调试：从简单到实战
qimablue的博客
06-20 4308
Chrome插件是一种使用HTML、CSS、JavaScript等Web技术来增强浏览器功能的软件。它们的功能丰富多样，比如阻止广告、管理密码、修改网页样式、添加便签等。这篇文章将介绍Chrome插件的基本实现原理，并以一个简单的"Hello World"插件为例，介绍插件的运行和调试方法。
入门示例chrome扩展：以下chrome扩展教程
02-22
在本"入门示例chrome扩展"教程中，我们将深入理解如何构建一个基本的Chrome扩展。 首先，Chrome扩展由以下几个核心组件构成： 1. **manifest.json**：这是每个Chrome扩展的配置文件，它包含了扩展的基本信息，如...
chrome-extension-boilerplate:概述chrome扩展程序的基本结构以进行说明
05-25
`chrome-extension-boilerplate` 是一个基础模板，帮助开发者快速入门，理解并构建自己的Chrome扩展。在这个模板中，我们将探讨Chrome扩展的关键组成部分和开发流程。 一、Chrome扩展的组成结构 1. **manifest....
mixpanel-tools:用于从您的 Web 应用程序调试 Mixpanel API 的 Chrome 扩展程序
07-24
Chrome 扩展用于调试来自 Web 应用程序的 mixpanel 分析调用。 特征 记录混合面板分析调用 隐藏和显示混合面板属性 下载记录事件的 JSON 文件 录制/暂停按钮 支持 GET、POST 和批处理请求 支持自托管 API / 代理...
chrome-tesseract-plugin:在Chrome扩展程序中使用tesseract.js
03-08
特塞斯特拉特 在Chrome扩展程序中使用tesseract.js
angular调试 chrome浏览器插件
01-11
支持最新版angular2+, 目前Aungury1.4版本. 打包完毕,拖拽到chrome扩展程序中使用即可.
chrome extension debug在哪？
子燕若水的博客
08-13 249
Content script Open the DevTools panel of the web page the extension is trying to alter. To use DevTools from within the content script, click the dropdown arrow next totopand select the extension.
chrome扩展，如何调试background.service_worker 对应的js文件
徐同保的专栏
03-25 1034
chrome扩展，如何调试background.service_worker 对应的js文件
chrome extensions & debug
weixin_30363509的博客
12-18 198
chrome extensions & debug debug background.js debug popup.js debug content_script.js chrome.storage chrome.storage.sync.get bug // array OK chrome.storage.sync.get([ "jira_s...
chrome插件开发流程（超全）
热门推荐
weixin_43898997的博客
09-19 1万+
对于一直从事前端开发者的你，在未开发过任何插件的前提下，肯定会很想知道，chrome插件开发和普通网页开发有什么区别呢？ 如何从0开始着手开发chrome插件呢？下面跟随这片文章来一起学习chrome插件的开发的流程吧～
Chrome Extension 入门教程（三）通讯
weixin_42194433的博客
02-27 771
三种脚本 弹出页脚本：popup 后台脚本：backgroup 内容脚本：contentscript 短连接 popup <-> background popup可以直接调用background中的JS方法，也可以直接访问background的DOM // background.js function test() { alert('我是background！'); } // popup.js var bg = chrome.extension.getBackgroundPage(); bg.
【教程向】从零开始创建浏览器插件（五）调试篇
最新发布
九日的博客
05-11 516
在开发Chrome扩展时，不同类型的脚本和页面涉及不同的调试方法。这包括背景页（Background Page）、弹出页面（Popup Page）和内容脚本（Content Scripts）。每个组件的调试方法有一定的差异，了解这些差异可以帮助开发者更有效地诊断问题和调优性能。
chrome扩展中，content-script与background.js之间的通信
valentinelzt的博客
07-08 1万+
通信的几种方式 popup和background通信 - background----> popup - popup--->background background给popup发消息 // background.js中 function toPopup () { alert('to popup') } // popup.js中 const bg = chrome.extension.getBackgroundPage() document.getElementById('btn').o
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值