slongzhang的博客

使用 userScripts API 在用户脚本上下文中执行用户脚本。

在浏览器扩展开发中，传统的页面跳转是最简单的，每次页面更新就会重新注入新脚本，而单页面网站利用H5的history路由接口，页面变化了但扩展并不会自动更新脚本，这时候就需要我们自己判断处理了

关于chrome扩展mv3中报错 - Uncaught TypeError: Cannot read properties of undefined (reading 'getDetails')

插件开发过程中偶尔会碰到需要由用户才能下载的文件上传到我们服务端，这时候就需要数据流的处理，但查询许多资料都没看到可用的资料，只能自己调试摸索

MV3 废弃了chrome.extension.getURL接口，请使用chrome.runtime.getURL替代参考文档： CHROME扩展开发文档之·chrome.runtime

chrome.runtime描述使用chrome.runtimeAPI 检索后台页面，返回有关清单的详细信息，以及侦听和响应应用程序或扩展生命周期中的事件。您还可以使用此 API 将 URL 的相对路径转换为完全限定的 URL。目录显现例子使用 getURL 将扩展图像添加到页面将背景数据放入内容脚本收集卸载反馈类型消息发送者安装原因OnRestartRequiredReason平台架构平台信息平台NaclArch平台操作系统港口请求更新检查状态特性ID最后一个错误方法连接连接本机获取背景页面获取清单get

之前找了不少如何开发谷歌插件的文章，结果发现都是些很基础的内容，并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢？如果通过webpack编译的话，就能使开发过程变得更舒服，使文件结构趋向模块化，并且打包的时候直接编译压缩代码。后来发现了vue-cli-plugin-chrome-ext插件，通过这个插件能很方便地用vue-cli3来开发谷歌插件，并能直接引用各种UI框架跟npm插件。

本文转自： https://guoqiankun.blog.youkuaiyun.com/article/details/112007833

在 Manifest V3 中，Chrome 扩展平台从后台页面转移到服务工作者。正如Service Workers: an Introduction中所述，“Service Worker 是您的浏览器在后台运行的脚本，与网页分开，为不需要网页或用户交互的功能打开了大门。” 这项技术可以实现类似原生的体验，例如推送通知、丰富的离线支持、后台同步和开放网络上的“添加到主屏幕”。Service Worker 的部分灵感来自 Chrome 扩展中的背景页面，但他们通过针对 Web 规模对其进行调整来迭代和改进此模

由于content scripts运行在Web页面的上下文中，属于Web页面的组成部分，而不是Google Chrome扩展程序。但是content scripts又往往需要与Google Chrome扩展程序的其他部分通信以共享数据。这可以通过消息传递实现，通过彼此互相的消息的监听与反馈进行通信。一个消息可以包含任何有效的JSON对象，如null，boolean，number，string，array，object。

在插件开发中，扩展数据注入位置完全得根据宿主网站的设计适配，其中最无奈的就是得注入到A标签里去，但根据W3C的html解析协议，A标签是内联元素(inline element)不能嵌套A标签的，如果发生嵌套则会被拆分，这样就会导致我们扩展数据无法使用A标签了，也会影响我们扩展数据的点击事件

chrome.alarms描述： 使用 chrome.alarms API 安排代码周期性地或者在将来的指定时间运行。可用版本： 从 Chrome 22 开始稳定支持。权限： “alarms”类型Alarm （Alarm的属性）name ( string )该定时器的名称。scheduledTime ( double )该定时器计划的触发时间，以纪元以来所经过的毫秒数为单位（例如 Date.now() + n）。由于性能原因，定时器可能会延迟至该时间后的任意时间。periodInM

w3c规定，当请求的header匹配以下不安全字符时，将被终止，具体参考如下：Accept-CharsetAccept-EncodingConnectionContent-LengthCookieCookie2Content-Transfer-EncodingDateExpectHostKeep-AliveRefererTETrailerTransfer-EncodingUpgradeUser-AgentVia插件解决方案chrome.webRequest.onBe

(function(){ var topCookies = [{"domain":"cn.tophatter.com","hostOnly":true,"httpOnly":false,"name":"uuid","path":"/seller/campaigns/200482","sameSite":"unspecified","secure":false,"session":true,"storeId":"0","value":"33122574"} //,... ];

开发插件选项页时由于引用了vue框架开发前端页面，导致拒绝eval求值问题Uncaught EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’ blob: filesystem:”.这是浏览器自

// 返回灰色画布function grey_img(src){　　/*创建一个canvas*/ var canvas=document.createElement('canvas'); var ctx=canvas.getContext('2d'); var img=new Image(); img.src=src; canvas.height=img.height; canvas.width=img.width; ctx.drawImage(img,0,0); var imgdata

/*** 监听tab页面变化(用于处理页面logo问题)*/chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){ if( changeInfo.url == undefined){return false;} // 检查是否是wish页面的tab if(tab.url.indexOf('pinterest.com') > 0){ // 通知对应的tab页面url变化了,需要优化为离开立即移除，进入则加载完毕再

在页面头部加载完时立即注入下面代码，注入完成后如若有xhr请求就可以监听到了/*! * 牛魔王选图助手ajax全局监听 * author: slongzhang 2020.08.10 * email: slongzhang@qq.com * Copyright 2019-2020 newmorehot, Inc. * 全局变量统一按大写字母G开头命名 */;(function () { if ( typeof window.CustomEvent === "function" ) retu

/*** 获取网站的根域名*/function getMainHost() { var key = 'author_'+Math.random(); var keyR = new RegExp( '(^|;)\\s*'+key+'=slongzhang@qq.com' ); var expiredTime = new Date( 0 ); var domain = document.domain; var domainList = domain.split( '.' );

cookie监听与赋值操作需要manifest文件里声明权限，cookie权限如下：“permissions”: [ “cookies”, “????/.要操作cookie的域名.com/*” ],/*** 监听cookie变化*/chrome.cookies.onChanged.addListener(function(changeInfo){ // cookies.onChanged监听的是所有的cookie,所以需要过滤只处理我们网站自己的cookie if(GhomepageDoma

/*** 监听cookie变化*/chrome.cookies.onChanged.addListener(function(changeInfo){ // cookies.onChanged监听的是所有的cookie,所以需要过滤只处理我们网站自己的cookie if(GhomepageDomain == changeInfo.cookie.domain){ var cookieNameReg = /[A-Z]/; var cookieInfo = changeInfo.cookie;

使用webRequest首先需要在manifest权限里声明,[“webRequest”,“webRequestBlocking”,"以及监控的地址，如监控所有则：*: //*/* "]//插件监听拦截-图片chrome.webRequest.onBeforeRequest.addListener ( function(details) { // console.log(details); // 回调返回一个对象，如果对象里得cancel为true则会拦截不继续请求 return {can

**转载自 小茗同学 的 【干货】Chrome插件(扩展)开发全攻略 写在前面我花了将近一个多月的时间断断续续写下这篇博文，并精心写下完整demo，写博客的辛苦大家懂的，所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面：https://github.com/sxei/chrome-plugin-demo ，大家可以直接下载下来运行。另外，本文图片较多，且图片服务器带宽有限，右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发，所以请耐心等待加载完毕。