chrome extensions 开发之 page_action

最新推荐文章于 2022-09-03 00:27:59 发布
最新推荐文章于 2022-09-03 00:27:59 发布
阅读量5.7k 收藏 1
点赞数 1
分类专栏： chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ID19870510/article/details/54203920
版权

page_action 和 browser_action 

不同之处在于 browser_action 一直显示在右上角 toolbar , page_action可以控制显示、隐藏(置灰)

"page_action": {  
    	"default_icon": "image/icon.png" ,
    	"default_title": "default title",
    	"default_popup": "popup.html" 
  	}, 
 "background": {
      	"page": "backgroud.html",
      	"persistent": false
    },

page_action 中的属性, default_popup 如果不写的话 , 

pageAction hide状态，点击icon按钮，显示界面如下：

“查看弹出内容”置灰, 不可点击(如果配置了default_popup以后 popup.html仍然不显示)


 当pageAction show的话，显示界面如下：

如果不配置default_popup, , 按钮不可点 , 配置default_popup，可以显示


还需要注意一个问题

{  
	"manifest_version":2,

  	"name": "coffee",
  	"version": "1.0",  
  	"description": "page_action用法",  
	"icons":{ 
		"128": "image/icon.png"
	},
  	"page_action": {  
    	"default_icon": "image/icon.png" ,
    	"default_title": "default title",
    	"default_popup": "popup.html" 
  	}, 
  	"background": {
      	"page": "backgroud.html",
      	"persistent": false
    },
    "permissions": [     
     	"declarativeContent", "tabs", "http://*/*", "https://*/*"
    ]   
}

background.html 不可以用background.js代替 

<html>
<head>
<script src="js/background.js"></script>
</head>
<body>
<canvas id="canvas" width="19" height="19"></canvas>
</body>
</html>

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
     if(tab.url.indexOf ("taobao") > 0){
         chrome.pageAction.show(tabId);
     }else{
         chrome.pageAction.hide(tabId);
     }
});
如果page_action配置 background.js 则程序运行的时候回报错 

Lazy require of extension.binding did not set the binding field





-droidcoffee-
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Chrome浏览器扩展开发系列之五：Page Action类型的Chrome浏览器扩展
weixin_30271335的博客
09-15 206
Page Action类型的Google Chrome浏览器扩展程序，通常也会有一个图标，但这个图标位于Chrome浏览器的地址栏内右端。而且这个图标并非始终出现，而是当某指定的页面打开时才会出现。也就是说，这个图标与当前打开的页面有关，只有打开了指定的页面才会显示该图标，对该页面执行对应的操作。 定义Page Action类型的Google Chrome扩展程序，首先要在manifest.js...
Chrome扩展开发指南(6)——Page Actions(地址栏图标)
emerald0106的专栏
12-19 2770
Chrome扩展开发指南(6)——Page Actions(地址栏图标) 地址栏图标代表的是页面内功能，这种功能只能在特地的当前页面发生，而不是所有页面都有这种功能，也就是并不是所有页面上都能显示这样一个图标。 比如以下功能只在特定页面才有： RSS订阅图标(仅在有rss订阅功能的网页中才显示) 幻灯片显示照片（仅在特定的照片分享网页中有这种功能）
关于chrome.extension如何取得pageAction的title
qdujunjie的专栏
03-01 1267
一开始我是这么写的： chrome.pageAction.getTitle(tab.id,function(result){alert(result)}); 但是总是得不到任何反应。于是参考一下这里：http://chajian.baidu.com/developer/extensions/pageAction.html#method-getTitle 我们先来看一下
wordpress 常用的钩子解析
精彩人生
02-05 3562
本文列出了WordPress 2.1及以上版本中可用于插件开发的动作钩子（hook)。 ?想了解过滤器钩子和动作钩子的定义和作用？请看插件API。 ?想了解插件的基本编写过程？请看插件开发。 ?想查看过滤器钩子函数列表？请看插件API之常用过滤器。 ?想查找WordPress 2.1之前版本的过滤器钩子和动作钩子？请看Plugin API/Hooks 2.0.x。 注意：为本文添加词条或
分页的action都继承自 PageAction
私密空间，来访请登记~！
04-27 628
public abstract class PageAction extends BaseAction{    private static final int DEFAULT_PAGE_SIZE = 10;    protected int pageNo = 0;    protected int pageSize = DEFAULT_PAGE_SIZE;    public
chrome-extensions
05-31
5. **Browser Action or Page Action**：这两种类型的图标出现在浏览器的地址栏旁边，用户可以通过点击这些图标来触发扩展的功能。 6. **Options Pages**：选项页面允许用户自定义扩展的设置和偏好。 7. **Local ...
chrome-extensions:镀Chrome扩展组
03-30
3. **API调用**：Chrome提供了丰富的API，如`chrome.tabs`用于操作标签页，`chrome.storage`用于存储数据，`chrome.browserAction`或`chrome.pageAction`用于控制浏览器动作按钮。 4. **生命周期管理**：Chrome会...
chrome插件开发入门教程
09-21
在开发 Chrome 插件时，需要使用 Chrome 浏览器的扩展管理页面（chrome://extensions）来加载和调试插件。可以使用开发者工具来设置断点、单步调试和查看变量。使用控制台命令 `location.reload(true)` 可以重新加载...
chrome-extensions:Chrome 扩展程序
07-19
- **浏览器/页面动作**：通过`browserAction`或`pageAction`在manifest中配置，点击图标触发事件。 - **选项页面**：使用`options_page`属性指定选项页面，通过`chrome.storage` API保存用户设置。 - **权限管理*...
chrome-extensions:学习如何开发chrome扩展程序和一些演示
05-23
此外，Chrome提供了丰富的API，如chrome.storage用于数据持久化存储，chrome.tabs用于操作标签页，chrome.webRequest可以拦截和修改网络请求，chrome.browserAction和chrome.pageAction则可以添加浏览器图标并响应...
Chrome扩展及应用开发 入门笔记（四）
我的E家
07-02 883
Browser Actions Browser Actions将扩展图标置于Chrome浏览器工具栏中，地址栏的右侧。如果声明了popup页面，当用户点击图标时，在图标的下侧会打开这个页面1。同时图标上面还可以附带badge——一个带有显示有限字符空间的区域——用以显示一些有用的信息，如未读邮件数、当前音乐播放时间等。 Page Actions Page Ac
chrome 通知权限管理_如何在Chrome浏览器中阻止或管理通知
cuma1988的博客
09-24 4507
chrome 通知权限管理Webapps have come a long way. Thanks to features like notifications, they can even replace traditional desktop apps for many people. But if you’d rather not be bombarded by notifications,...
Chrome插件开发进阶
weixin_34226706的博客
07-03 273
好奇心使然，体验了下chrome的插件开发（按照英文的意思chrome extension或许更应该称为chrome扩展），发现还真是个不错的东东，在浏览google开发文档的同时也做了些尝试，脑子不好使，不记录下来的话没准过一周就淡忘了，索性把自己的一些尝试记录下来跟大家分享一下吧。 本文会围绕chrome插件以下的5个概念来进行说明： background page（后台页面） br...
开发Chrome插件教程
小龙在线
06-24 712
插件由不同组件构成，组件包括background脚本, content脚本,一个选项页, UI元素和一些逻辑文件。扩展组件的实现技术包括HTML、CSS和Javascript。 创建Manifest 扩展从Manifest文件开始，文件名叫manifest.json。 1、打开chrome://extensions，也可以通过更多工具-扩展程序来打开这个页面。 2、打开开发者模式。 3、加载未打包按钮 这个扩展会被成功加载。 增加功能 现在还没有任何功能，现在通过background.js增加一个后台功能。
【干货】Chrome插件(扩展)开发全攻略
weixin_33762321的博客
07-11 5650
写在前面 我花了将近一个多月的时间断断续续写下这篇博文，并精心写下完整demo，写博客的辛苦大家懂的，所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面：https://github.com/sxei/chrome-plugin-demo ，大家可以直接下载下来运行。 另外，本文图片较多，且图片服务器带宽有限，右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发，所以请耐心等...
过滤分享的Chrome扩展开发详解
子清行
02-08 6095
明确需求扩展的功能在前文《眼不见为净——过滤人人网分享的chrome扩展》中已做了介绍：把人人网中一些带有“不分享就如何如何”等诅咒信息的标题给屏蔽掉，眼不见为净！描述得更详细些就是：过滤功能只在人人网域名（http://*.renren.com/*）下启用；只有访问人人网时，扩展的图标才显示；好友的分享信息会出现在很多地方（如好友主页、新鲜事、分享主页等），这些都要过滤；
编写Chrome扩展插件教程
w
02-28 6035
一个 Chrome 是一个配置（入口）文件 manifest.json 和一系列 html、css、js、图片文件的集合，然后将代码使用Chrome打包成crx文件即可使用 然后生成crx文件，直接把该文件拖进去既可以使用 一、manifest 文件的编写 1、包括扩展的名称（name）、版本（version）、描述（description）、图标位置（icons）和 manifes...
chrome插件-显示在地址栏的二维码
weixin_34235457的博客
01-18 535
2019独角兽企业重金招聘Python工程师标准>>> ...
chrome V3插件入门到放弃，Plasmo不完全使用指南
热门推荐
Jioho的博客
09-03 1万+
本文介绍了Plasmo这个工具，可以用来适应各种的技术框架，让你快速上手插件开发。同时也说了一下chrome插件升级到V3需要注意的内容和分享了一些快速入门的优秀文章和文档
from selenium import webdriver from selenium.webdriver.chrome.options import Options from bs4 import BeautifulSoup import time # 目标网站的 URL url = 'http://example.com/rank/list' # Chrome 浏览器配置 chrome_options = Options() chrome_options.add_argument('--disable-extensions') chrome_options.add_argument('--disable-gpu') chrome_options.add_argument('--no-sandbox') chrome_options.add_argument('--headless') chrome_options.add_argument('--disable-dev-shm-usage') # 启动 Chrome 浏览器 browser = webdriver.Chrome(options=chrome_options) # 发起第一页的请求并解析 HTML 标签 browser.get(url) time.sleep(3) # 等待 3 秒钟，等待 AJAX 加载完成 soup = BeautifulSoup(browser.page_source, 'html.parser') total_pages = soup.select('.ant-pagination-item:not(.ant-pagination-next):not(.ant-pagination-prev)')[-1]['title'] current_page = soup.select_one('.ant-pagination-item-active').text rank_list = parse_page(soup) # 发起所有页码的请求，并将结果存入列表中 for page in range(2, int(total_pages) + 1): if str(page) != current_page: # 模拟在浏览器中翻页操作 browser.execute_script(f'window.antDesignPro.current.delete("/rank/list?page={int(current_page)}")') # 删除当前页的数据 browser.execute_script(f'window.antDesignPro.current.jump("/rank/list?page={page}")') # 跳转到需要打开的页码 time.sleep(3) # 等待 3 秒钟，等待 AJAX 加载完成 soup = BeautifulSoup(browser.page_source, 'html.parser') page_data = parse_page(soup) rank_list += page_data current_page = page # 将所有分页数据合并成一个完整的 DataFrame 对象 all_data = merge_data(rank_list) # 关闭浏览器窗口 browser.quit() # 打印输出结果 print(all_data)，注意：目标网站采用了 AJAX 或者 JavaScript 技术来进行分页加载数据，因此翻页时并没有刷新整个页面，也无法从html文本获得第一页以后的排名帮我修改代码，要求用到request和beautifulsoup等库，
最新发布
06-10
好的，以下是修改后的代码，使用了 requests 和 BeautifulSoup 库来发送请求和解析 HTML 标签： ```python import requests from bs4 import BeautifulSoup import pandas as pd import time def get_rank_list(url): # 发起第一页的请求并解析 HTML 标签 res = requests.get(url) soup = BeautifulSoup(res.text, 'html.parser') total_pages = soup.select('.ant-pagination-item:not(.ant-pagination-next):not(.ant-pagination-prev)')[-1]['title'] current_page = soup.select_one('.ant-pagination-item-active').text rank_list = parse_page(soup) # 发起所有页码的请求，并将结果存入列表中 for page in range(2, int(total_pages) + 1): if str(page) != current_page: # 模拟在浏览器中翻页操作 headers = { 'Referer': url, 'X-Requested-With': 'XMLHttpRequest' } res = requests.delete(url, headers=headers, params={'page': int(current_page)}) # 删除当前页的数据 res = requests.get(url, headers=headers, params={'page': page}) # 跳转到需要打开的页码 soup = BeautifulSoup(res.text, 'html.parser') page_data = parse_page(soup) rank_list += page_data current_page = page # 等待 3 秒钟，等待 AJAX 加载完成 time.sleep(3) # 将所有分页数据合并成一个完整的 DataFrame 对象 all_data = merge_data(rank_list) return all_data def parse_page(soup): rank_list = [] for tr in soup.select('tbody tr'): rank = tr.select_one('.rank').text.strip() # 排名 name = tr.select_one('.name').text.strip() # 名称 score = tr.select_one('.score').text.strip() # 得分 rank_list.append([rank, name, score]) return rank_list def merge_data(rank_list): df = pd.DataFrame(rank_list, columns=['rank', 'name', 'score']) return df if __name__ == '__main__': url = 'http://example.com/rank/list' all_data = get_rank_list(url) print(all_data) ``` 注意：目标网站采用了 AJAX 或者 JavaScript 技术来进行分页加载数据，因此需要在请求头中添加 `X-Requested-With` 和 `Referer` 参数，以模拟浏览器发送请求。此外，还需要等待 AJAX 加载完成后再解析 HTML 标签，可以使用 `time.sleep()` 函数来实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值