首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

配置,background可以通过page指定一张网页,也可以通过scripts直接指定一个JS,Chrome会自动为这个JS生成一个默认网页: { // 会一直常驻后台JS或后台页面 "background...popup popup是点击browser_action或者page_action图标时打开一个小窗口网页,焦点离开网页就立即关闭,一般用来做一些临时性交互。 ?...这是因为content-script有一个很大“缺陷”,也就是无法访问页面JS,虽然它可以操作DOM,但是DOM却不能调用它,也就是无法DOM通过绑定事件方式调用content-script...Chrome插件8种展示形式 browserAction(浏览器右上角) 通过配置browser_action可以浏览器右上角增加一个图标,一个browser_action可以拥有一个图标,一个tooltip...pageAction(地址栏右侧) 所谓pageAction,指的是只有当某些特定页面打开才显示图标,它和browserAction最大区别是一个始终都显示,一个只特定情况才显示。

11.7K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端基础-Ajax简介

    我们之前学习代码,向服务器提交数据典型应用是就是 form 表单,其中 action 就是我们提交数据服务器端地址; 完成一个 form 表单; 当我们点击提交按钮时,页面就会跳转到服务器页面...; 但是,本不想让页面跳转,数据也能被发送到服务器端,同时,还可以接受服务器返回数据; 当我注册一个网站账号时,填写完用户名并没有点击提交,但是,用户名如果有重复,文本框傍边便会提示更换用户名...类似的功能还有 验证短信发送、百度搜索关键字推举、无刷新分页等等…… 想要完成这些类似的功能实现,我们今天所要学习ajax技术,就是核心技术; ajax 也是技术名词缩写: Asynchronous...Web Access第一次使用了ajax技术,允许客户端脚本发送HTTP请求,并随后集成IE4.0应用(XMLHTTP),到2005年,谷歌(Google)把Ajax成功应用于自家多款Web系统...(Gmail邮箱、Google Map、Google 搜索建议), 从此Ajax被越来越多的人所接受… 客户端通过HTTP向服务器发送请求 1.2 快速入门 <form action

    50720

    谷歌站长工具怎么用?傻瓜式教学

    Google Search Console直译过来意思就是:谷歌搜索控制台,通过这个工具,你可以看到网站在Google搜索表现。...图片来源:Google Search Console 2. )网址前缀形式添加资源,比较常用就是下载网站对应Html验证文件,然后上传到网站根目录。...点开后输入网址: 图片来源:Google Search Console 一定一定不要误会!这个评分只是谷歌对于网页加载速度给予评分,只要网站实际加载速度目标地区能够达到3秒以内就行。...图片来源:Google Search Console 5. 链接数量 工具里查找“链接数量”后就可以显示你网址外部和内部链接数量: 图片来源:Google Search Console 6....工具中点开“效果”,我们可以看到谷歌搜索次数和曝光次数。如果你是新网站,可以配合GA来查看搜索流量,里面的Organic Search就是自然搜索流量。

    1.6K20

    30分钟开发一款抓取网站图片资源浏览器插件

    并且可以控制页面dom....由于popup窗口也是一个网页,所以我们一般会建立一个popup.html和popup.js用来控制popup页面展示和交互.我们manifest.json配置如下: { "page_action....以下是笔者总结一些应用场景,大家感兴趣可以尝试去实现: 谷歌浏览器自定义桌面 网页性能分析工具 网页爬虫 埋点工具 网页热力图生成工具 安全拦截插件 广告过滤插件 网站动态换肤 第三方数据导入 代码格式化工具...6.开发一款抓取网站图片资源浏览器插件 首先还是按照笔者风格,开发任何一种工具之前都要明确需求,所以我们来看看该插件功能点: 能植入网页按钮,通过点击按钮捕获网页图片 能在用户端展示捕获图片...插件核心代码主要是这些,当然还有很多细节要考虑,把配置文件和一些细节放到github了,如果感兴趣朋友可以安装感受一下。 github地址:一款提取网页图片数据浏览器插件

    1.3K10

    Google 全面转向人工智能,机器学习高管接管搜索引擎

    认为 Google 算法曾被称为PageRank PageRank是整个蜂鸟算法一部分,它使用特定方式给网页信用排序,基于其他页面指向此页面的链接来计算。...所以结果是, Google 可以利用它所知一切,从更常见查询寻找答案,然后将它提供给不常见查询。 要强调,并不知道RankBrain关联了这两条查询。...只知道 Google 给出了第一个例子。而这只是对RankBrain如何将不常见搜索与常见搜索联系来提高搜索质量一种说明而已。 Bing使用RankNet同样可以达到这种效果?...并没有发现太多不同。即使没有RankBrain,结果通常会不同,仅仅因为使用“老土”方式,从澳大利亚网站为使用澳大利亚版本Google搜索用户呈现页面。 RankBrain真的有帮助?...信号是绑定内容典型因素,比如网页词语,指向页面的链接,网页是否部署安全服务器上等。它们也可以绑定用户,比如用户地理位置信息或搜索浏览历史。

    74170

    初探 Google App Indexing

    导语 Firebase App Indexing 可以将您应用纳入 Google 搜索。如果用户安装了您应用,他们就可以启动您应用,并直接转到他们正在搜索内容。...1.介绍 如今随着Android手机普及以及谷歌强大搜索引擎,谷歌搜索相关市场份额互联网占有率非常高,这为它打造它独有的搜索生态圈提供了强大支撑,如google inc、google map、...谷歌应用搜索,显示指向应用内容链接,方便用户点击链接直接打开joox应用并直接跳转到指定应用,这有利于提升jooxA1指标。...搜索搜索joox应用安装,其安装按钮会显示首页搜索结果旁边,以便用户能够方便地安装joox应用。...可以通过Search Console统计后台,分析用户搜索joox 行为以及页面搜索占比,这有利于结合AdMob定位投放广告,提高广告收入。

    7.1K00

    谷歌提供了检查技术SEO问题3个技巧

    URL可以索引?一个容易被忽视但很重要常见问题是 URL 是否可以编入索引。Google 搜索控制台 URL 检查工具非常适合对 Google 是否已将网页编入索引进行故障排除。...即使这可能不是您期望规范 URL,该内容也会被编入索引并能够显示搜索结果,因此这通常没问题。...额外提示:Google 告诫不要将 cache 或 site:search 运算符用于任何类型诊断目的。例如,某个网页可以编入索引,但不能显示 site:search 。...请参阅使用 Search Console 呈现 HTMLGoogle 支持提供了 Search Console 查看呈现 HTML 分步操作:“您可以直接在网址检查工具输入网址,也可以点击大多数...幸运是,Google 使用 Search Console 和 Chrome DevTools 提供工具可以轻松调试技术问题。

    16710

    谷歌人工智能算法RankBrain运行原理解析

    认为谷歌算法曾被称为PageRank PageRank是整个蜂鸟算法一部分,它使用特定方式给网页信用排序,基于其他页面指向此页面的链接来计算。...这也是一个非常老系统,以前一篇文章里做了介绍: The Broken “Ballot Box” Used By Google & Bing。...为了测试这点,Google.com和澳大利亚版本Google上分别搜索并没有发现太多不同。...即使没有RankBrain,结果通常会不同,仅仅因为使用“老土”方式,从澳大利亚网站为使用澳大利亚版本Google搜索用户呈现页面。 RankBrain真的有帮助?...信号是绑定内容典型因素,比如网页词语,指向页面的链接,网页是否部署安全服务器上等。它们也可以绑定用户,比如用户地理位置信息或搜索浏览历史。

    1.1K100

    谷歌人工智能算法RankBrain运行原理FAQ

    认为谷歌算法曾被称为PageRank PageRank是整个蜂鸟算法一部分,它使用特定方式给网页信用排序,基于其他页面指向此页面的链接来计算。...这也是一个非常老系统,以前一篇文章里做了介绍: The Broken “Ballot Box” Used By Google & Bing。...为了测试这点,Google.com和澳大利亚版本Google上分别搜索并没有发现太多不同。...即使没有RankBrain,结果通常会不同,仅仅因为使用“老土”方式,从澳大利亚网站为使用澳大利亚版本Google搜索用户呈现页面。 RankBrain真的有帮助?...信号是绑定内容典型因素,比如网页词语,指向页面的链接,网页是否部署安全服务器上等。它们也可以绑定用户,比如用户地理位置信息或搜索浏览历史。

    97540

    如何自动提交站点地图给谷歌?

    将你站点地图自动提交给谷歌 # 前言 本文教大家如何自动提交网站站点地图到谷歌 前提条件为你已经有Search Console账号并绑定了你网站~ 如果不知道什么是Search Console请先看下之前文章...如何在Google搜索到我网站??...站点地图(sitemap)一般分为两种方式来记录,xml格式文件或者txt文件,一般两种文件包含了该网站所有链接,可以提交给爬虫去爬取,让搜索引擎更快去收录网站内容 # 站点地图示例 sitemap.xml...# 提交方式 如何手动提交站点地图给谷歌 这篇 文章已经有介绍了,没看过小伙伴可以看下 那么如何自动提交呢?...sitemap=http://taixingyiji.com/google.xml 配置Github Action 跟着图片一步一步来~ 然后填写内容如下~,可以直接复制 ## 利用GitHub

    1.1K20

    Scrapy爬虫框架教程(四)-- 抓取AJAX异步加载网页

    之前我们已经简单了解了对普通网页抓取,今天就给大家讲一讲怎么去抓取采用Ajax异步加网站。...通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以不重新加载整个网页情况下,对网页某部分进行更新。...遇到这种情况初步就可以认定这个页面是采用AJAX异步加载,你也可以通过右键查看网页源码来鉴别。比如说你右键查看源码ctrl+f搜索这个杀手不太冷这几个字,你会发现源码里没有。 ?...还记得上面推荐那个chrome插件Toggle JavaScript? ? 安好这个插件它就会出现在chrome浏览器右边,试着轻轻点一下。 ? 天呐!这么神奇?!...在这里只讲解第一种方法,第二种方法作为爬虫终极武器我会在后续教程中进行讲解。 回到我们需要抓取页面,还记得说过页面的一个细节,下拉更新。

    3K90

    App数据分析全攻略(2)先部署这8个事件

    前言:上一篇文章简单介绍了App分析两个最基本数据类型:事件和屏幕名称。其中屏幕名称比较简单,基本可以理解为Web分析PV;而事件则更加强大,善加利用可以让分析工作事半功倍。...其实事件不仅存在于App埋点中,Web分析也是可以用到,所以希望大家仔细看完今天这篇文章,无论对于哪个平台GA分析都将大有帮助。...事件有三个可供使用维度参数(Category、Action、Label),这就好像每一个网页PV都有两个最常见维度:URL地址以及网页标题。...这样一来,和分享行为相关信息基本就统计全了。 事件参数用法非常灵活和自由,本篇中大家只要知道这是用法之一即可,以后文章里再解释为什么要这样设置,以及能得到什么样结果。...,显示搜索结果时发送事件 Category:搜索 Action:用户搜索关键词 Label:有结果 / 无结果 大家可能注意到了,发送搜索事件“瞬间”并不是用户点击搜索按钮时,而是返回搜索结果之后

    69180

    前端HTML+CSS面试题汇总一

    知道网页制作会用到图片格式有哪些? 知道什么是微格式?谈谈理解。在前端构建中应该考虑微格式?...有哪项方式可以对一个DOM设置它CSS样式? CSS都有哪些选择器? CSS可以通过哪些属性定义,使得一个DOM元素不显示浏览器可视范围内? 超链接访问过后hover样式就不出现问题是什么?...三者都可以被用来浏览器端存储数据,而且都是字符串类型键值对 同上 同上 更多详情,请点击这篇博客查看:٩(๑❛ᴗ❛๑)۶ cookie localStorage sessionStorage...优点: 将智能数据添加到网页上,让网站内容搜索引擎结果界面可以显示额外提示。...不同搜索引擎对页面的抓取和索引、排序规则都不一样。还要了解各搜索门户和搜索引擎之间关系,比如AOL网页搜索Google搜索技术,MSN用是Bing技术。

    62920

    前端工作面试经典问题(超级全)

    你是如何解决制作一个网页应用或网站过程,你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素? 请谈谈你喜欢开发环境。 你最熟悉哪一套版本控制系统?...浏览器同一时间可以从一个域名下载多少资源? 有什么例外? 请说出三种减少页面加载时间方法。...如果页面使用 'application/xhtml+xml' 会有什么问题? 如果网页内容需要支持多语言,你会怎么做? 设计和开发多语言网站时,有哪些问题你必须要考虑?...请解释 CSS sprites,以及你要如何在页面或网站实现它。 你最喜欢图片替换方法是什么,你如何选择使用。 你会如何解决特定浏览器样式问题? 如何为有功能限制浏览器提供网页?...你熟悉 SVG 样式书写? 如何优化网页打印样式? 书写高效 CSS 时会有哪些问题需要考虑? 使用 CSS 预处理器优缺点有哪些? 请描述你曾经使用过 CSS 预处理器优缺点。

    1.1K80

    网站内容重复影响SEO概率很小

    网站内容,重复性出现会影响SEOSEO圈子里面似乎有很多人对重复内容认知错误,相信很多人都会听到,如果你网站上有重复内容,将受到搜索引擎处罚。...所以大多数情况下,搜索引擎不会对网站进行处罚,而是从索引删除某些网页,特别是发现重复内容情况下。 ?...谷歌真的会试图删除重复内容?实际上谷歌已经提供了一个Canonical特殊标签来处理重复内容,告诉谷歌哪里可以找到首选或原始内容。...网站重复内容搜索结果排名也不同 网站内容可以归纳如下: 同样内容,不同网站 唯一内容是最好 重复内容通常也很好 由于网页上其它词语不同变化,几十个网站上相同文章搜索结果页面出现不同排名,其网页要素也各不相同...除此之外,你可以版权允许情况下,在内容改变一些标题或修改一些句子,或者分解成片段等等,具体方法参考SEO内容优化实施策略解决使用现有内容引起重复问题方法部分。

    1K30

    Vimperator:玩酷你Firefox

    要想跟快速学会Vimperator就必须学会使用:help,你还可以通过使用:help option 来获得针对特定选项帮助,或者通过使用:viusage或者:exusage来获得快捷键帮助;...d        关闭当前活动标签; 利用:tabopen实现在新标签打开网页,也可以使用快捷键t; 利用:open在当前页打开网址,也可以使用快捷键o; 获得提示和打开网页。...看起来我们已经能够使用Vimperator正常上网了,等等,我们如何打开网页链接、如何查看网页提示呢?是不是我们还需要带尾巴小朋友帮助。...我们可以利用vimperator提供提示功能,按下;并且按a就可以看到页面链接都会在黄色背景下出现白色数字,输入数字后就能够跳到相应链接,据说也可以输入文字,然后搜索到相应链接,不过这个对于中文支持仿佛没有那么好...还有一个快捷方式f和F。利用小写f,可以在当前标签打开选中链接,利用大写F可以标签打开选中链接。 保存设置。

    49640

    进阶|Chrome还不够神,但你写扩展程序可以很神

    可以 chrome 应用商店下载到它: 开发它原因是因为,我们业务开发,开发过程经常需要面对超长 URL,带有 N 多个参数,它可能长这样: 不是开玩笑,真实情况可能比这个还长。...因为调试需要,经常要找到某一个特定参数,获取或者修改它值。 读者可以尝试一下,贴到浏览器,找到 cid 参数,修改为另外一个值。如果没有工具,这个过程是很痛苦。...基于这个出发点,制作了 URLHelper 这个扩展,它界面大概长这个样子,可以非常方便对 URL 参数进行删查改排序,修改参数刷新页面: 所以,扩展程序觉得每个前端都可以开发,用于解决我们工作生活使用浏览器遇到各种问题...它可以实现一些功能例子及适用场景,大致如下: 1.在网页找出未链接 URL,并将它们转换为超链接 2.查找特定信息或者 DOM 结构,增加字体大小,使文本更具有可读性 3.发现并处理 DOM...微格式数据 我们可以这样理解它,页面加载完毕之后,我们扩展程序会向这个页面注入一个或者额多个脚本,这个脚本可以获得浏览器所访问 web 页面的详细信息。

    1K20
    领券