Chrome插件popup.js提取当前tabs页面地址url + 标题title

最新推荐文章于 2024-03-27 10:16:47 发布
最新推荐文章于 2024-03-27 10:16:47 发布
阅读量3k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49202462/article/details/107703572
版权 
popup.js


chrome.tabs.getSelected(null, function (tab) { // 先获取当前页面的tabID
     
   alert(tab.title);
   alert(tab.url);
});
老懒鸟
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
chrome插件获取页面html,从Chrome扩展程序获取当前页面的源HTML
weixin_32183107的博客
06-05 2781
小编典典将脚本插入您要从中获取源代码的页面中，并将其发送回弹出窗口…。manifest.json{"name": "Get pages source","version": "1.0","manifest_version": 2,"description": "Get pages source from a popup","browser_action": {"default_icon": "ic...
chrome扩展程序获取当前页面URL和HTML内容
weixin_34081595的博客
07-30 9508
先交代一下manifest.json中的配置 // 引入注入脚本"content_scripts": [ { "js": ["content_script.js"], // 在什么情况下使用该脚本 "matches": [ "http://*/*", "https://*/*" ], // 什么情况下运行【文档加载开始】 "run_a...
chrome插件开发：popup.html 页面获取当前页面【当前视窗】的url
滴水石穿
11-05 1974
在manifest页面配置上 tabs 权限，否则无法使用tabs接口权限。
Chrome 插件 tabs API 解析
最新发布
guoqkmiss的博客
03-27 1417
Chrome 浏览器插件 tabs API 解析
Chrome 插件开发-主动获取所有页签的tabid，background.js直接向所有页签同步传递消息
小蓝枣的博客
09-09 4400
Chrome 插件开发-主动获取所有页签的tabid，background.js直接向所有页签同步传递消息。 有时候 backgroud.js 需要向所有的页签同时同步消息，这时就要获取到所有页签的 tabid 了，下面的方法即可实现。 // 获取所有的页签 chrome.tabs.getAllInWindow(null, function(tabs) // 通过tabid向每一个页签发送消息 chrome.tabs.sendMessage(tabs[i].id, {type: 'xxx'});
jQuery 中获取调用Tab的当前页面
weixin_34191734的博客
07-01 1468
2019独角兽企业重金招聘Python工程师标准>>> ...
popup.js获取页面网址和标题
ysfb_cc的博客
12-07 747
//popup.js chrome.tabs.query({active: true,currentWindow: true},function(tabs) { var url = tabs[0].url; var title = tabs[0].title; alert(title + url); })
popup.js:jQuery 的弹出式插件
06-24
弹出窗口.js jQuery 的弹出插件。 创建用于。 作者 法沙德·沙巴兹 例子 查看示例目录中的文件。 执照 麻省理工学院许可证 (MIT)
Chrome插件开发.pdf
09-30
Chrome 插件开发概述 Chrome 插件开发是指在 Google Chrome 浏览器上开发小程序的过程，这些小程序可以增强浏览器的功能，提供更多的功能和服务。下面是 Chrome 插件开发的基本概念和步骤： 一、基本概念 * ...
vue.js 初体验之Chrome 插件开发实录
10-19
Vue.js初体验之Chrome插件开发实录 Vue.js是一种流行的前端JavaScript框架，以其易学易用和高效的特性受到开发者喜爱。本文将介绍如何使用Vue.js开发Chrome插件，以一个简单的预览Animate.css动画效果并生成代码的...
Vue3开发Chrome插件时popup-content-background之间的通信API组合和实现
08-26
本程序为作者使用vue3开发chrome插件时实践各个通讯API后，总结的相互之间无干扰的高效数据传输API组合，程序使用vscode可直接打开，npm install安装node_modules文件夹后直接点击NPM工具中的watch或build开始对插件...
百度 popup.js 完美修正版非常的不错 脚本之家推荐
10-30
百度空间的弹出窗口和拖拽效果(也就是popup.js),看起来挺不错的,用起来也相当好,如上图所示。现在很多知名网站都是用的这样的技术，建议大家都收藏起来，以备以后使用。
chrome扩展与标签tab的内容交互
weixin_33701564的博客
09-12 1279
chrome插件提供了查找tab的api：　　chrome.tabs.get(integer tabId, function callback)但是出于安全的考虑，tab的属性中没有document，因此无法在扩展中直接获取某个页签页面中的页面元素，但是tab有这样一个方法：　　chrome.tabs.sendRequest(integer tabId, any reques...
tab带url直接访问
weixin_30599769的博客
04-02 487
function showTab() { $(".tab-nav li").click(function(){ var self = $(this), target = self.data("tab"); self.addClass("current").siblings(".current").removeClass("current"...
Chrome 小技巧 ：搜索所有已打开的标签卡 Search your open tabs
移动端开发干货分享
03-22 2990
不知道大家有没有跟我一样的烦恼，浏览器常年开着几十个 Tab 页，由于内容没有看完，都舍不得关，但是当你想会找某个 page 的时候，由于开了太多，找起来是十分困难 无意间发现 Chrome 提供了 Search your open tabs 的功能，点击 tab 栏最右侧的下箭头 它还可以在你打开的多个 Chrome 之间搜索，点击后直接跳转到对应 Chrome 的对应 Tab。 不起眼的小功能对我来说如获至宝，分享给和我有同样痛点的朋友 ~ ...
chrome插件知识点总结
konglei1996的博客
10-12 406
这两天做了一个chrome插件，主要作用就是，通过按钮向当前页面注入一个cookie，主要用于判别是否开启测试环境，另一个功能是检测页面是否有CNZZ链接，如果有，通过处理，实现点击弹框链接跳转到相应数据报表页。（项目地址：https://github.com/dannisi/switch_cookie_chrome_extension） 下面总结一下，方便日后的回顾。 1.配置 {
JS获取本地IP
热门推荐
深山苦练二十年
10-08 1万+
废话不多说直接上代码。： <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> <script type="text/javascript"> fu
tab页面切换时获取tab的name
weixin_44683763的博客
07-09 2602
// 切换tabs获取tabs的name handleClick(tab, event) { console.log(tab, event); let beforeTabId = event.target.getAttribute(‘id’); let tabId = beforeTabId.split(’-’)[1]; console.log(tabId); this.tabSelectId = tabId; }
写一个Chrome插件，页面加载后自动向指定节点插入数据
05-26
好的，下面是一个简单的Chrome插件示例，它会在页面加载完成后自动向指定节点插入数据： 1. 创建一个新文件夹，命名为 "my-extension"。 2. 在 "my-extension" 文件夹中创建一个名为 "manifest.json" 的文件，并将以下内容复制到该文件中： ``` { "name": "My Extension", "version": "1.0", "manifest_version": 2, "description": "A simple extension that inserts data into a specific node on a page.", "content_scripts": [ { "matches": [ "<all_urls>" ], "js": [ "content.js" ] } ] } ``` 3. 在 "my-extension" 文件夹中创建一个名为 "content.js" 的文件，并将以下内容复制到该文件中： ``` // Wait for the page to finish loading window.addEventListener("load", function(event) { // Find the target node var targetNode = document.getElementById("target-node-id"); if (targetNode) { // Insert the data targetNode.insertAdjacentHTML("beforeend", "<p>Here is some data!</p>"); } }); ``` 4. 在 "my-extension" 文件夹中创建一个名为 "popup.html" 的文件，并将以下内容复制到该文件中： ``` <!DOCTYPE html> <html> <head> <title>My Extension</title> <script src="popup.js"></script> </head> <body> <h1>My Extension</h1> <p>Click the button to insert data into the target node.</p> <button id="insert-data">Insert Data</button> </body> </html> ``` 5. 在 "my-extension" 文件夹中创建一个名为 "popup.js" 的文件，并将以下内容复制到该文件中： ``` // Find the "Insert Data" button var insertDataButton = document.getElementById("insert-data"); // When the button is clicked, send a message to the content script to insert the data insertDataButton.addEventListener("click", function(event) { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {action: "insertData"}); }); }); ``` 6. 在 Chrome 浏览器中打开 "chrome://extensions/" 页面。 7. 选择 "开发者模式"，然后点击 "加载已解压的扩展程序" 按钮。 8. 选择 "my-extension" 文件夹，然后点击 "确定"。 现在，当你在浏览网页时，可以单击插件图标并单击 "Insert Data" 按钮，以在页面中插入数据。请确保将 "target-node-id" 替换为实际要插入数据的节点的 ID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值