Chrome extensions -显示chrome-extension:// as chrome.tabs.query的URL - 腾讯云开发者社区

文章/答案/技术大牛

发布

chrome extension develop

- - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy --> <script...currentWindow: true }; chrome.tabs.query(queryInfo, (tabs) => { // chrome.tabs.query.../extensions/tabs#type-Tab var url = tab.url; // tab.url is only available if the "activeTab...This means that // you CANNOT do something like this: // // var url; // chrome.tabs.query...，在chrome extension按钮出现后，右键inspect popup，添加调试断点，F5进入断点 chrome资料 https://crxdoc-zh.appspot.com/extensions

1K1 0

【干货】Chrome插件(扩展)开发全攻略

经过测试，其实不止是background，所有的直接通过chrome-extension://id/xx.html这种方式打开的网页都可以无限制跨域。...homepage_url 开发者或者插件主页设置，一般会在如下2个地方显示： ? ?...{ chrome.tabs.update(tabId, {url: url}); }) } 桌面通知 Chrome提供了一个chrome.notificationsAPI以便插件推送桌面通知，暂未找到.../extensions/messaging 前面我们介绍了Chrome插件中存在的5种JS，那么它们之间如何互相通信呢？...如何查看某个插件的ID？进入 chrome://extensions ，然后勾线开发者模式即可看到了。 ?

13K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

开发Chrome插件获取当前页面Cookie

资料官网开发文档如下 https://developer.chrome.com/docs/extensions?...应用作扩展程序的操作图标的图片，以及当用户点击扩展程序的操作图标时在弹出式窗口中显示的 HTML 页面。...cookieList = document.getElementById('cookie-list'); getButton.addEventListener('click', function() { chrome.tabs.query...toast.style.display = 'none'; }, 2000); } getButton.addEventListener('click', function() { chrome.tabs.query...hl=zh-cn 其他示例 chrome扩展示例 https://github.com/GoogleChrome/chrome-extensions-samples

1.4K1 0

【Chrome】931- 何从零开始开发一个 Chrome 插件？

chrome://extensions/ 在浏览器地址栏输入chrome://extensions/打开“拓展程序”页面。注意：需要启用右上角的 “开发者模式” 才能加载已解压的插件文件： ?..."content_scripts": [ { // 在匹配的URL中运行，表示所有的URL都会运行。...// 类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js script.src = chrome.extension.getURL...，不然会报错，这是因为Chrome的安全政策规定的：https://developer.chrome.com/extensions/contentSecurityPolicy popup错误示范：的tab; chrome.tabs.query({active: true, currentWindow: true}, function (tabs) { chrome.tabs.sendMessage

2.2K6 0

Chrome扩展插件的开发--获取网页Cookies

Chrome扩展插件的开发--获取网页Cookies Chrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。...在 manifest.json 的 action 字段配置 popup，其中 default_popup 指定点击 popup 后显示的 html 内容，路径位置相对于配置文件，另外default_icon... 读取浏览器已打开的tab页签，其中'active': true访问到的是当前所处的标签页 // WINDOW_ID_CURRENT 当前标签页id chrome.tabs.query(...console.log('什么是tabs===',chrome, tabs) const url = new URL(tabs[0].url) chrome.cookies.getAll...浏览器内导入使用 · 打开chrome的插件管理页面chrome://extensions · 打开该页面右上角的开发者模式 · 点击加载已解压的扩展程序，上传本地文件即可导入插件 · 点击浏览器右上角扩展程序图标可以将自己的插件固定到浏览器顶部

3K2 0

写个自己的chrome插件

"default_icon": "logo.png" // 浏览器扩展插件显示图标 }, // 在插件列表里显示不同尺寸的图标 "icons": {...url,当选择时，匹配任何url,必须要有matches[3]否则不会生效 "content_scripts": [ { "js": [...('received user data', response); }); popup.js向content.js通信在popup页面需要查找当前激活的tabs // popup.js chrome.tabs.query...与content.js通信，就可以修改我当前页面上的元素了另外推荐一个chrome插件官方的例子chrome-extensions-samples[4]，看完一些例子多插件哟更深刻的认识，在下一节里，.../#programmatic [4]chrome-extensions-samples： https://github.com/GoogleChrome/chrome-extensions-samples

2.3K1 0

Lumos——一款由大模型Ollama提供的本地LLM浏览网页Chrome扩展

:11434（版本0.1.10）注意：环境变量OLLAMA_ORIGINS必须设置为chrome-extension://*以允许来自Chrome扩展的请求。...容器应将OLLAMA_ORIGINS环境变量设置为chrome-extension://*。...装载未打包的扩展（安装） https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked...•Ollama模型：选择所需模型（例如llama2）•Ollama主机：选择所需主机（默认为http://0.0.0.0:11434）•向量存储TTL（分钟）：将URL内容存储在向量存储缓存中的分钟数。...另外，如果页面上的内容被突出显示（例如，突出显示的文本），那么将解析该内容，而不是来自内容解析器配置产生的内容。

3.8K1 0

写html页面没意思，来挑战chrome插件开发

chrome.action.onClicked.addListener(function () { chrome.tabs.create({ url: chrome.runtime.getURL...chrome.runtime.onInstalled.addListener(async () => { chrome.tabs.create( { url: chrome.runtime.getURL...此示例适用于 Service Worker、弹出式窗口和作为标签页打开的 chrome-extension:// 页面 (async () => { const [tab] = await chrome.tabs.query...}) tabs创建页签首先在manifest.json的权限中添加tabs配置 { "permissions": ["tabs"] } 添加tabs的相关操作 chrome.tabs.query...({}, function(tabs){ console.log(tabs) }) function getCurrentTab(){ let [tab] = chrome.tabs.query

1.3K1 1

Chrome扩展开发入门

在如上 manifest.json 文件中的 action.default_icon 字段中配置，支持配置多个规格（数组）。 2）扩展弹窗扩展弹窗的显示时机为当用户点击扩展图标之后弹出。...3）选项页选项页的显示时机为当用户在扩展图标上右键-选项可打开，点击之后打开新 Tab 页。在如上 manifest.json 文件中的 options_page 字段中配置。...除了选项页也可以是其它html页面，其路径拼接方式为：chrome-extension://{id}/{pageName}.htmlid 为插件 id，pageName 为插件代码中的 html 文件名...addEventListener('click', async () => { const [tab] = await chrome.tabs.query({ active: true, currentWindow...插件地址，直接在chrome浏览器地址栏输入地址： chrome://extensions/ 3）除了上述两种外，还有一种就是“野生插件”了。

4.7K3 0

使用Svelte开发Chrome Extension

因此萌生了开发一个二维码Chrome Extension的想法(＠￣ー￣＠)。...—— Chrome开发文档 Chrome插件本质上是以manifest.json为入口规定的一系列前端资源集合，基于Chrome浏览器提供的API，实现各种功能。...：扩展要使用的浏览器权限，大部分Chrome扩展API均有权限依赖 action：定义插件操作行为对应的页面 default_popup：点击插件图标时的页面 icons：插件图标添加chrome...在首页加载时，获取当前tab的url，url展示到输入框，并作为二维码组件的输入属性。...] = await chrome.tabs.query(queryOptions); return tab; } import { onMount } from 'svelte'; let url

1.1K2 0

Posta：一款功能强大的跨文档信息安全搜索工具

工具要求 Chrome Chrome / Chromium Node.js（可选）工具安装开发环境我们可以在专用浏览器（Chromium）中以完整的开发环境运行Posta。...Chrome扩展我们还能够以Chrome / Chromium扩展的形式来运行Posta。...首先，使用下列命令将该项目源码克隆至本地： git clone https://github.com/benso-io/posta.git 接下来，访问chrome://extensions，此时需要确保浏览器为开发者模式...然后点击“Load upacked”，选择Posta中的chrome-extension目录，并将其上传至你的浏览器中，最后加载扩展。...我们可以选择需要深入分析的通信会话，监听器部分会显示负责处理通信的相关代码，点击之后还可以直接拷贝代码内容： ? ?

6662 0

chrome插件实时通信的几种方式

主要利用chrome.tabs.query与chrome.tabs.sendMessage这两个api实现 // set.js function sendMessageToActiveTab(...message) { // 获取当前活动标签 chrome.tabs.query({}, function (tabs) { tabs .filter((v)...其实我们只需要修改一行代码即可 function sendMessageToActiveTab(message) { // 向所有的tabde chrome.tabs.query({...，比如一个插件的设置页与content.js实时通信，我们是借助先查询所有的tabs,chrome.tabs.query({}, callback),然后再向所有的tabs发送消息chrome.tabs.sendMessage...//developer.chrome.com/docs/extensions/whatsnew/ [2]code example： https://github.com/maicFir/lessonNote

2.9K1 0

15分钟手摸手教你写个可以操控 Chrome 的插件

即可 chrome-extension://${extensionID}/background.html 每次更新代码点击按钮刷新即可为了调试方便起见我在 popup.js 中加入了以下代码每次点击我们的插件图标即可新开一个后台页面...const extensionId = chrome.runtime.id const backgroundURL = `chrome-extension://${extensionId}/background.html...) { this.socketIoURL = url } connectSocket() { if (!...message.operateTabIndex : 0 console.log(message) chrome.tabs.query({ index: operateTabIndex }...，然后在我们的 localhost:9527 发送信息这是我们就能在我们预期的页面接收到对应参数了 11.png 这时你可能会看到 2 条 log,其实这个是正常现象, 因为如果你是通过打开了 chrome-extension

1.8K2 0

Chrome Extension

128x128: 在从 chrome web store 安装的过程中需要使用, //- 48x48: chrome://extensions 插件管理页面中使用 //- 16x16: 插件页面当做 favicon...但是这种方法极度低效，直接chrome://extensions/找到你插件的ID ?...然后: chrome-extension:///插件入口html文件 such as: chrome-extension://abpkdgpklogmegpnglebckniebimhfll...注意千万不要将您的私有密钥包含在扩展程序中！创建包进入以下URL，打开扩展程序管理页面:chrome://extensions 确保右上角的开发者模式复选框已选中....进入如下 URL，打开扩展程序管理页面： chrome://extensions 单击打包扩展程序按钮，出现一个对话框。在扩展程序根目录字段中指定扩展程序所在文件夹，例如 C:\myext。

3.9K3 0

web安全csp白名单的弊端

还可以强制本页面资源升级到https： csp弊端：一. chrome-extension...直接嵌入script标签的方式： chrome-extension://cfjajdmplgcnfchakhmfonhbckkjefng..., //你要拦截的url地址 types: ["script"] //拦截类型为script， }, ["blocking"] //类型blocking为拦截...动态插入chrome-extension js时 injectJs('chrome-extension://cfjajdmplgcnfchakhmfonhbckkjefng/js/kendogrids.js...chrome-extension 进行拦截限制

1.9K2 0

资源分享（chrome插件+软件+物品）

这个是一个Chrome的爬虫插件 https://www.webscraper.io/documentation?...chrome-extension://dgjhfomjieaadpoljlnidmbgkdffpack/after_install.html 以及程序员日常会看的Github，我们会看很多各种各样的代码但是又不会全部下载...，那这个插件就是可以让你在浏览器里面进行方便的阅读 https://extensions-manager.com/ chrome的插件好用，但是太多了在针对不同的页面应该是又针对的打开这个插件就是这个作用...chrome-extension://ijllcpnolfcooahcekpamkbidhejabll/options/options.html 这个是将一个网页真正的变成一篇精美的文章目前我使用频率低.../ 开源的音频编辑工具，是audition的好帮手 https://www.microsoftstore.com.cn/refurbished/certified-refurbished-surface-go

8026 0

好插件·用户造【CSND超好用插件】·【机械键盘大放送】

目录插件安装：开始体验：在线抽奖：大奖列表：快去开奖【chrome-extension://kfkdboecolemdjodhmhmcibjocfopejo/pages/plugin-activity.html...·插件扩展】建议点：新功能： LOOK最新版本：而且【机械键盘带回家】super享受重点看到了吧【立即下载·机械键盘带回家】，下载一下试试：插件安装：下载后添加拓展：浏览器打开【chrome...://extensions】 ·当前我用的就俩，现在添加【CSDN】的拉入：点击【添加拓展】这里谷歌会有一个提示：点击【保留状态】开始体验：超级贴心的操作提示：在线空间：可以备份操作...在线抽奖：看到好地方了：真的哦，看有俩人抽到的大奖了：大奖列表：快去开奖【chrome-extension://kfkdboecolemdjodhmhmcibjocfopejo/pages/...当前只有一个【Getman+】的。以上个人建议啊，并且身边用的也会很多，特别教学过程中免得安装【postman】也是很方便的，在学校方面也是一个很大用户量。祝【CSDN】的用户量快速跃升。

3153 0

chrome插件 DIY

chrome插件最常见的功能莫过到url栏右侧的那些小图标了，就是这些： ? 如果看完上入门指引小demo后，你肯定知道了怎么样实现这样一个功能。...= location.href; chrome.storage.sync.get(url, function(data) { data = data[url];...(obj, function() { //console.log('send callback'); chrome.tabs.query({ // 查找当前tab...(sender.url, function() { chrome.tabs.query({ // 查找当前激活的标签tab active...content_script调试：devtool -> sources -> Content scripts background调试： chrome://extensions/ 激活开发者模式，点击对应插件

3.6K6 0

url带中文参数显示乱码的问题

最近要上个项目，其实很简单的东西，就是拼接一个url，不过url中的参数需要UrlEncode编码的，其实对我来说，这个问题很好解决，C#用HttpUtility.UrlEncode来进行编码，asp用...asp站的文件编码是gb2312，虽然.net的文件格式也是gb2312，但因为webconfig里设置的requestEncoding是utf8的，所以在接收中文的时候，无论你UrlDeCode怎么解码...ok，.Net中，可以指定编码进行url编码，test.aspx.cs可以变成：HttpUtility.UrlEncode("中文测试", Encoding.GetEncoding("utf-8"))...Response.Write(HttpUtility.UrlDeCode(Request["str1"],Encoding.GetEncoding("gb2312")); 看下go.aspx页面显示...：第一条会显示乱码第二条会显示：中文测试这是什么原因呢？

4.7K9 0

chrome访问本地静态资源

manifest中添加web_accessible_resources声明静态资源地址： "web_accessible_resources": ["iframes/test.html"] 然后进行引入： URL...= chrome-extension://插件ID/iframes/test.html 注意：因为插件的id是动态的所以需要动态的获取 css中：__MSG_@@extension_id__ src...: url(chrome-extension://__MSG_@@extension_id__/css/fonts/element-icons.woff) format("woff") js中：chrome.runtime.getURL...("iframes/notSupport.html") src="${chrome.runtime.getURL("iframes/notSupport.html")}"

2.3K1 0

点击加载更多

chrome extension develop

【干货】Chrome插件(扩展)开发全攻略

开发Chrome插件获取当前页面Cookie

【Chrome】931- 何从零开始开发一个 Chrome 插件？

Chrome扩展插件的开发--获取网页Cookies

写个自己的chrome插件

Lumos——一款由大模型Ollama提供的本地LLM浏览网页Chrome扩展

写html页面没意思，来挑战chrome插件开发

Chrome扩展开发入门

使用Svelte开发Chrome Extension

Posta：一款功能强大的跨文档信息安全搜索工具

chrome插件实时通信的几种方式

15分钟手摸手教你写个可以操控 Chrome 的插件

Chrome Extension

web安全csp白名单的弊端

资源分享（chrome插件+软件+物品）

好插件·用户造【CSND超好用插件】·【机械键盘大放送】

chrome插件 DIY

url带中文参数显示乱码的问题

chrome访问本地静态资源

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐