Chrome-谷歌页面翻译增强插件开发

Chrome谷歌页面翻译增强插件开发

最近想做一个Chrome的插件(看别的博客说其实叫插件不准确,应该叫拓展,大家叫习惯了就按习惯的来吧).一开始咱先直接看了Chrome开发(360翻译)和chrome extensions(这个官方的文档拓展的方法和属性有表格比较好找,但得会科学上网),之后卡住了开始上网搜发现[干货]Chrome插件(扩展)开发全攻略这篇博客写的已经很全了,而且附带的GitHub上的demo也特别全.咱这里就稍微把咱做的插件遇到的问题写一写(几乎都是看文档和那个博客解决的). 谷歌页面翻译增强插件一:如何点击…

Chrome-谷歌页面翻译增强插件开发

最近想做一个 Chrome 的插件(看别的博客说其实叫插件不准确,应该叫拓展,大家叫习惯了就按习惯的来吧).一开始咱先直接看了[Chrome 开发(360 翻译)](http://open.chrome.360.cn/extension_dev/overview.html)和[chrome extensions](https://developer.chrome.com/extensions)(这个官方的文档拓展的方法和属性有表格比较好找,但得会科学上网),之后卡住了开始上网搜发现[[干货]Ch…

windows如果在IE中用超链接打开谷歌页面

Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\openChrome] @="URL:openChrome Protocol" "URL Protocol"="" [HKEY_CLASSES_ROOT\openChrome\DefaultIcon] @="chrome.exe,1" [HKEY_CLASSES_ROOT\openChrome\shell] [HKE…

使用chrome查看页面元素的css样式

使用chrome查看页面元素的css样式我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. 我们希望看到博客园这张图片的具体信息.就可以打开chrome的开发者工具,点击箭头后选中该图片,这时代码就自动定位到了该元素的HTML代码,如下图所示: 这个页面中,右上方的蓝色阴影下即为图片元素所在的HTML代码,而开发者工具的左下方就是该元素的css样式代码: 其中最上面的是行内样式, 往下有我…

使用 Headless Chrome 进行页面渲染 - 知乎专栏

使用 Headless Chrome 进行页面渲染 - 知乎专栏使用 Headless Chrome 进行页面渲染 - 知乎专栏这里我们使用 chrome-remote-interface 来远程控制 Chrome ,实际上 chrome-remote-interface 是对于 Chrome DevTools Protocol 的远程封装,我们可以参考协议文档了解详细的功能与参数.使用 npm 安装完毕之后,我们可以用如下代码片进行简单控制:…

Chrome/谷歌开发者工具分析

Chrome/谷歌开发者工具还是要好好掌握一下,对于前端开发超级有用:https://developers.google.com/web/tools/chrome-devtools/ 1.js内存使用分析: 2.可以查看js和css文件的使用率,精简css和js内容,较快加载速度. 3.性能实时监控 4.拦截某些请求: 5.模拟网络.模拟移动端.动画调试 6.js性能调试: 7.网页的性能分析: 8.内存分析: 9.…

chrome浏览页面常用快捷键

1.chrome浏览页面常用快捷键 Ctrl+N 打开新窗口. Ctrl+T 打开新标签页. Ctrl+W关闭当前标签 Ctrl + F4 关闭chrome浏览器 Ctrl+Tab 或 Ctrl+PgDown 切换到下一个标签页. Ctrl+Shift+Tab 或 Ctrl+PgUp 切换到上一个标签页. Ctrl+1 到 Ctrl+8 切换到标签栏中指定地位编号所对应的标签页. Ctrl+9 切换到最后一个标签页. Ctrl+Shift+T 从头打开前次封闭的标签页.谷歌浏览器可记住比来封闭的…

Chrome划词翻译-Saladict

Saladict 沙拉查词是一款专业划词翻译扩展,为交叉阅读而生.大量权威词典涵盖中英日韩法德西语,支持复杂的划词操作.网页翻译.生词本.PDF,以及 Vimium 全键盘操作 . 迄今为止最好用的网页划词翻译插件. 下载安装地址:Chrome安装地址项目地址:github/crimx/ext-saladict 特性词典丰富 - 精选大量词典,手工打磨排版,涵盖几乎所有领域 - 自动发音,可选不同词典.英美音 - 各个词典支持个性化调整 - 整个网页翻译,谷歌和有道分级网页…

使用Chrome测试页面响应性

如今我们都知道响应式的意思.作为开发者,我们常常开发一些响应式的应用.有很多工具可以帮助我们完成这个目的.某些人甚至使用付费扩展.然而,我用了一个东西,它就是 Google Chrome 浏览器. 在本文中,我们将会看到 Chrome 测试响应性的能力. 选择测试项目我们需要一个简单的网页来进行演示.我们随便建一个.下面的 HTML 代码展示了页面的初始状态. 它包含了导航和几行文本.接下来,我们会添加更多的标签. <!doctype html> <html> <hea…

Chrome 谷歌开发者工具使用窍门

我们这里介绍主要的几块:Console.Source.Network Console 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.l…

chrome(谷歌)登录失败解决方案

相信有很多小伙伴和我一样,同步chrome的收藏夹,这样也便于随时可以查看自己收藏的网址.但是同步文件,必须先要登录chrome账号,登录chrome账号时,总是会报黄页,或者一直加载不出来.接下来,我们一起解决这个问题 1.首先:我们先下载一个谷歌访问助手,然后安装链接: https://pan.baidu.com/s/1IZbB6mqN6BP6KxAQ1zOMlA 提取码: gf5z 2.安装谷歌访问助手在chrome的右上角找到图标,更多工具> 拓展功能 ,在百度百科上会告诉我们,把谷…

Chrome远程调试Android上Chrome的页面

下载最新的google chrome canary 手机chrome开启usb网页调试,如图所示: 在终端运行 ? SHELL adb forward tcp:9222 localabstract:chrome_devtools_remote /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=9222 --remote-debugging-p…

通过私有协议Chrome浏览器页面打开本地程序

近期方有这样的要求:这两个系统,根据一组Chrome开展,根据一组IE开展,需要Chrome添加一个链接,然后进入IE该系统的开发.这,需要Chrome跳转到创建一个链接IE浏览器指定的页面.同时也实现了跳跃的动画.第一解决的需要我们的Chrome转到IE的问题. 问题分析:从Chrome中跳转到IE,直接以http链接形式是不可能跳转到IE的,仅仅能通过单独开发的本地程序打开IE,问题是怎样让Chrome打开该程序.有一种方法能够实现:通过注冊私有协议,用户点击链接的时候直接使用私有协议调用本…

Google Chrome谷歌/火狐/Safari浏览器开发者工具基本使用教程

前言在阅读下面内容之前,那么些简单的了解浏览器开发者工具到底是什么东西,到底有什么用途. 浏览器开发者工具到底是什么? 其实简单的说,浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具,当然只要你有兴趣想要了解,只要你对这个世界充满这好奇,什么东西你都可以了解. 开发者工具到底有什么用? 它的作用在于,帮助开发人员对网页进行布局,比如HTML+CSS,帮助前端工程师更好的调试脚本(JavaScript.jQuery)之类的,还可以使用工具查看网页加载过程,获取网页请求(这个过程也叫…

chrome谷歌开发者工具（hover时候的css样式怎么在浏览器调试）

很多小伙伴在开发的时候,大多是在用谷歌开发者工具调试代码(快捷键F12 或 Ctrl-Shift-i). 可能会经常遇到需要调试hover样式的时候,一般都是直接改代码,然后在页面上刷新查看效果. 其实,这里有个小技巧,用谷歌开发者工具就可以方便的查看hover样式方法一(鼠标右键想查看hover样式的元素,选择检查或审查元素.这样就能在截图右边看到hover效果的样式代码) 注:这里鼠标右键选择检查或审查元素后一定不要把鼠标移到开发者工具外, 要始终在开发者工具内.不然无法看到hover样式…

chrome浏览器页面获取绑定返回顶部动画事件插件

在chrome浏览器下页面加载: var top = $("body").scrollTop() ; console.log(top) // 事件监听无效 var top = $("html").scrollTop(); console.log(top) // 事件监听无效 var top = $(document).scrollTop(); console.log(to…

firefox和chrome实现页面打印自动分页

在Firefox和chrome中直接调用打印功能的js方法是 window.print(); 但是如果页面很长,那么就需要分页,这时只需要在页面中添加css属性即可,如果想自动分页,则如下所示 <style type="text/css" media="print"> div { page-break-after:auto; page-break-inside:auto; page-break-before:auto; } </style>…

谷歌同声翻译Translatotron原理

背景介绍作为中国人,学好英语这件事从小学开始就让人苦恼,近些年随着AI的快速发展,语言差异是否会缩小甚至被消灭成了热门话题.在5月15日,谷歌AI在博客平台发出一篇文章,正式介绍了一款能保留原声的"同声传译"黑科技,消息一出,迅速席卷网络,为科技发烧友带来了更多曙光,下面,让我们来揭开这个叫做"Translatoron"的神秘面纱. Translatotron的出现目前市面常用的语音翻译产品的翻译过程包含三个步骤,首先将语音转换为文字,再由机器将文字转换为目标语…

chrome获取页面element的xPath

chrome真的是强大的工具 1.在chrome打开的页面点击F12,进入开发者模式 2.点击弹出的开发者工具左上角的跟踪箭头,再点击需要跟踪的页面元素,html程序定位到元素在程序中位置 3.选中的程序语句左侧的三个点---copy---copy XPath…

[小工具] chrome上日语翻译工具

rikaikun -> 日语 "理解君" 下载地址: https://chrome.google.com/webstore/detail/rikaikun/jipdnfibhldikgcjhfnomkfpcebammhp 安装后有效该按键后,鼠标移动到日语上,就可以显示日语的翻译了.…

Chrome Performance 页面性能分析指南

1.背景性能优化是前端开发一个非常重要的组成部分,如何更好地进行网络传输,如何优化浏览器渲染过程,来定位项目中存在的问题.Chrome DevTools给我们提供了2种常用方式 Audits和Performance,Audits可以对页面进行性能评分,同时,还会给我们提供一些优化建议.而Performance提供了非常多的运行时数据,能让我们看到更多细节数据.下面主要介绍一下如何使用DevTools中的Performance来进行性能分析 2.Performance介绍首先在新的无痕窗口打开…

自己动手写谷歌API翻译接口

可以看到,利用GET请求方式,带入某些参数,就会返回一个json数组,QueryString参数如下: 同样的,我们只需要传入这三个参数,就可以获得我们想要的翻译内容,公开方法,代码如下. static string TranslateGoogleString(string translateContent, string fromLanguage = "zh-CN", string toLanguage = "en") { string transRe…

针对Chrome谷歌等浏览器不再支持showModalDialog的解决方案

最近在维护一个老项目,之前都是用IE来调试代码的.今天想着测试一下项目的兼容性,就用了谷歌浏览器,然后就遇到这样一个问题:一段用showModalDialog实现弹出模态框和返回值的js代码,在调试时报出了下面这个错误: Uncaught TypeError: window.showModalDialog is not a function 一开始怎么都想不通,明明以前都是可以正常打开的,为什么现在就不行了呢……然后一查才知道,原来是Chrome 把对showModalDialog的支持去掉了(…

chrome 安装页面编码选择插件

https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlmhefphglae set character encoding…

Chrome 谷歌如何快速实现跨域

第一步:在你的E盘或者其他盘新建一个文件夹,命名为:E:\MyChromeDevUserData 第二步:找到你的谷歌浏览器快捷图标,鼠标右键选择属性,出现以下界面: 第三步:在目标选项的最后添加: --disable-web-security --user-data-dir=E:\MyChromeDevUserData (我的路径为:"C:\Users\u Y\AppData\Local\Google\Chrome\Application\chrome.exe" --disable-…

如何上Chrome谷歌商店

将以下代码复制到本地Hosts中即可. #Google Services START64.233.162.83 0.docs.google.com64.233.162.83 0.drive.google.com64.233.162.83 1.docs.google.com64.233.162.83 1.drive.google.com64.233.162.83 10.docs.google.com64.233.162.83 10.drive.google.com64.233.162.83 11.…