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

JavaScrtip之JS最佳实践

2.使用内嵌的事件处理函数 事件处理函数将通过onclick方法来调用popUp()具体实现方式和我之前在JS图片库的第一版一样http://www.cnblogs.com/GreenLeaves/...#"符号指向当前文档的开头,实际工作全部由onclick属性负责完成。 很遗憾,上面介绍的两种方法都不能平稳退化,因为如果用户禁用了浏览器的JavaScript功能,这样的超链接将毫无用处。...,我们不可能一个个的去加,而且将JS代码写在html标签里也十分的不合适,这点css已向我们证明,所以我们对上面的代码在做进一步的改进: window.onload=prepareLinks; //window.onload...绝大多数浏览器都能或多或少地支持JavaScript,绝大多数现代浏览器对DOM的支持都非常不错,但是还是有极少数古老的浏览器可能无法理解,所以这种情况下,即使这类用户使用的是支持JavaScript的浏览器某些脚本也不一定能正常工作...window对象的load事件依然可以执行对文档进行的操作。

2.1K50
您找到你想要的搜索结果了吗?
是的
没有找到

如何快速地开发一个chrome扩展插件

每一个扩展都有一个被浏览器运行的背景页,此外还有事件页面,背景页面是一直都是激活状态,而事件页面只是在触发事件的时候才会激活,因此为了节省内存和提高浏览器的性能,尽可能选择事件页面。...我们可以操作用户的书签和浏览记录 我们可以控制下载,管理下载内容 我们可以监听网络请求,监听事件响应 我们可以修改界面样式,可以添加自定义css 我们可以在页面添加想要的元素 总之,chrome几乎为我们提供了完整控制浏览器的扩展...; }); } popup.html Color all the divs popup.js window.onload = function() {...chrome.extension.sendMessage({ type: "color-divs" }); } } devtools.html window.onload

39620

Chrome插件开发

安装 Chrome 插件​ 首先打开 Chrome,如下图即可进入插件的管理页面 这时候记得把右上角的开发者模式给勾上,如果勾上的话你无法直接将文件夹拖入 Chrome 进行安装,就只能安装.crx...,就出现乱码(将 UTF-8 的编码变为了 windows1252),而只需要把 background.html 代码修改成正常的 HTML 结构,也就是上上面的那个代码即可解决该乱码情况。...content.js​ 我们主要的向页面注入脚本就依靠这个文件,相当于给页面添加了一个 js 文件,但是content和原始页面共享 DOM,但是共享 JS,如要访问页面 JS(例如某个 JS 变量)...//ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js temp.src = chrome.extension.getURL(jsPath) temp.onload...也就是下面的这行代码 { // 普通页面能够直接访问的插件资源列表,如果设置是无法直接访问的 "web_accessible_resources": ["js/inject.js"],

3.8K20

浏览器插件开发-manifest文件解读「建议收藏」

指定弹出的窗口,可以是任意 html badges “徽章” 就是小图标上的一个标记,用来展示一些状态 7. page_action 代表可以在当前页面执行的操作,活动时显示灰色,对应接口 chrome.pageAction...suggested_key": { "default": "Ctrl+X", "mac": "Command+X", "windows...弹出的,要监听 窗口弹出事件可以使用 popup_page 的onDomReady 11. content_scripts content_script 在一个特殊的环境中运行,可以称之为隔离环境...,在这里可以访问所注入页面的DOM,但是不能访问里边的任何 javascript 变量和函数,反之,页面中的js 也不能访问 content_script 中的变量和函数 访问目标网站的 DOM...http://"] 指定匹配的网址, js 设置注入脚本 css 设置注入样式 run_at 定义注入要本的时机 document_idle 表示浏览器帮你把握时机,会在 DOM 完成 与 window.onload

2.2K20

Apriso Modern UI样式系列之六 Popup组件实现无刷新弹窗

概述 在Process Builder通过ACTION绑定popup windows可以实现弹窗,但是默认情况Server Mode模式下会刷新整个界面,用户体验不好。...正如系列一中介绍的,ModernUI中包含了一些扩展的Javascript、CSS和Operation实体,其中也包含了一些非常有用的窗体组件。...本文介绍其中一个实现无刷新弹窗的组件的基本用法,该组件包含: Javascript:ModernUIPopup.js Operation: ModernUI_Popup_Execute:用于Ajax方式实现弹窗...override Action 一个View Action): 设置Action样式:为popup,用于JQuery样式选择 ▶第三步:在主界面的View Operation中引入Javascript文件...指定onActionSuccess事件回调函数 // onError : null指定onError事件回调函数 var popup = $('body').modernUIPopup

15310

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

content-scripts content-scripts能够在合适的时机(页面载入前、载入后、空闲时)注入脚本,允许内容脚本更改其JavaScript环境,而不与页面或其他内容脚本发生冲突。...content-scripts 和原始页面共享DOM,但是共享JS,如要访问页面JS(例如某个JS变量),只能通过inject-scripts来实现。...js/inject.js'; let script = document.createElement('script'); script.setAttribute('type', 'text/javascript...ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js script.src = chrome.extension.getURL(path); script.onload...popup.js 功能伪代码: // popup页面被打开时,去后台获取最新header window.onload = function () { let backend = chrome.extension.getBackgroundPage

1.8K60

twikoo仿段落评论,实现快速评论功能

经过设计,我决定将按钮添加在右键菜单中,并且是文章页,且需要选中文字右键才有效果(因为你选中文字回复什么段落),我们先添加按钮,如果没有进行魔改右键菜单的请按照别人的教程进行魔改) 以上均可以实现右键菜单的魔改...非文章页选中非文章页选中文章页选中 非文章页选中文字时,右键复制及回复均无法显示 非文章页选中文字仅会触发复制 仅仅在文章页且选中文字的情况下才可以触发该动作 实现函数 这里我会咯嗦我的探索过程,请不想看只想实现功能的铁铁直接跳转到第三部分按照教程顺序实现即可...; script.src = 'https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js'; script.onload...; script.src = 'https://cdn.staticfile.org/twikoo/1.6.31/twikoo.all.min.js'; script.onload...} 这里我创建了一个事件,点击弹窗以外的空白位置关闭弹窗(可能是人之常情?

9420

全网最详细的谷歌插件开发小册📚

从改变浏览器的视觉主题,到阻止广告,从管理密码到加强网络安全,Chrome插件的使用场景几乎无所包,给用户带来高度定制化的浏览体验。...背景脚本(Background Scripts) 背景脚本是插件的主要工作区域,它可以监听浏览器事件,执行长时间运行的任务,或者管理插件的其他部分。...."); }); 浏览器关闭事件: Chrome没有提供浏览器关闭的直接事件,但是可以使用chrome.windows.onRemoved事件在最后一个浏览器窗口关闭时执行操作。...closed."); } }); }); 打开新窗口事件: 你可以通过监听 chrome.windows.onCreated 事件来知道新窗口打开。...你可以通过监听 chrome.windows.onRemoved 事件来知道窗口关闭。

84520

加点JavaScript魔法

01 服务器支持 在深入研究客户端之前,让我们先了解一下支持这些用户弹窗所需的服务器端的工作。用户弹窗的内容将由新路由返回,它是现有个人主页路由的简化版本。...我要将元素封装在元素中,然后将悬停事件和弹出窗口与相关联。由此产生的结构将是: <a href="......一个引起我注意的是manual模式,在这种模式下,可以通过<em>JavaScript</em>调用手动显示或删除弹出窗口,这种模式可以让我自由地实现悬停逻辑,所以我将使用该选项并实现我自己的悬停<em>事件</em>处理程序,并以我需要的方式<em>工作</em>...所以我添加了一个函数(现在是空的),将在悬停<em>事件</em>的一秒钟后被调用。由于<em>JavaScript</em>语言中的闭包机制,此函数可以访问在外部作用域中定义的变量,例如elem。...如果用户将鼠标指针移动到其中一个用户链接中,并在移动它之前停留了半秒钟,我<em>不</em>希望该timer继续运行并调用显示弹出窗口的函数。

3.9K10

WordPress首页简单广告框弹窗两种方法实现纯代码+插件

下面代码方式内容来自于蝈蝈要安静的文章: 方法一:纯代码实现 1、修改JavaScript 代码: var popup = document.getElementById('qgg_popup'); var...popup_box = document.querySelector('.qgg_popup_box'); var popup_close = document.querySelector('.qgg_popup_close...'); // 窗口加载时弹出 window.onload = function() { popup.style.display = "block"; } // 点击窗体其他位置时关闭 window.onclick...专门针对移动版设置独立内容:这款插件还独立针对移动版进行了设置,你可以在移动版上设置完全不同的内容,如果设置移动版则显示和pc版相同的内容。...移动端与pc端类似,你可以使用你的手机观看移动端的效果进行调整,如果设置移动端,那么移动端会继承pc端的内容。

5.2K43

谷歌插件Image downloader开发之popup

的交互逻辑是这样的:用户点击Image downloader的图标,会向页面(content script,见上一篇文章:谷歌插件Image downloader开发之 content script)发送收集图片事件...popup页就是点击谷歌插件图标所弹出来的页面。Image downloader的popup页是长成这样的: ?...getConfigAttrUrl())], }) } }); 上篇文章发在div.io上时,@幾米 提到了图片去重的问题,所有在返回图片是,用es6的Set方法去重,这个只处理同类型图片的去重,处理如背景图片和图片标签之间的重复图片...setTimeout(() => { this.sendMessage('attr', this.attr) }, 500) }, 配置的属性值发生变化时,向页面发送获取属性图片事件...width: '', height: '', } let image = new Image() image.src = src image.onload

1.1K00

设计和实现一个 Chrome 插件提升登录效率

第一版本的插件能力暂时接入后端,数据都存在本地。 优点 天然实现隔离不同域名环境下的数据,避免了测试、预发等环境混用的缺陷。...如果手动删除数据,可支持前端长久保存,并随时可以在控制台中查看,分享给其他合作者。 缺点 统一使用者针对不同浏览器访客角色无法实现账号打通的能力,这一缺陷将在下次接入后端时弥补。.../popup/index.html', inject: true, chunks: ['popup'], filename: 'popup.html',...// eventInit 可选,接受以下字段: // bubbles 是否支持冒泡,cancelable:能否被取消,composed:事件是否会触发shadow DOM(阴影DOM)根节点之外的事件监听器...target.dispatchEvent(event) 向一个指定的事件目标派发一个事件,从而触发监听函数的执行。

1.5K10

带你快速走进Chrome扩展开发的大门

清单记录重要的元数据,定义资源,声明权限,并标识哪些文件在后台和页面上运行 2 content scripts 内容脚本在网页上下文中执行 Javascript。...内容脚本只能使用 Chrome API 的一个子集,但可以通过与扩展服务工作者交换消息来间接访问其余部分 3 service worker 扩展服务工作者处理和监听浏览器事件。...它可以使用所有的Chrome API,但不能直接与网页内容交互;这就是内容脚本的工作 4 popup/page 扩展可以包含各种 HTML 文件,例如弹出窗口、选项页面和其他 HTML 页面。...(会对多余内容进行精简) 案例关键词 事件协调器 权限:activeTab API:Scripting API 快捷键 期望效果 插件开启前 插件开启后 配置清单文件 沿用上一个案例 注入服务工作者...先配置(指向服务工作者文件) { "background": { "service_worker": "background.js" } } 后编写 监听onInstalled事件,更新插件徽章文案

77410

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

谷歌浏览器插件通常由HTML、CSS和JavaScript组成,非常利于前端开发者。 开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。...背景脚本用于处理插件的后台逻辑,而内容脚本则用于在网页中执行JavaScript代码。 谷歌浏览器插件可以实现各种功能,例如添加新的工具栏按钮、修改网页内容、捕获用户输入、与后台服务器进行通信等。...:popup.html,一个弹窗页面 default_title:显示的标题 permissions:拥有的权限 tabs:监听浏览器tab切换事件 options_ui background: service_worker...API by providing a user interface to manage tabs and windows...下面设置2个按钮,原谅和原谅。点击原谅,就可以关闭弹窗。点击原谅,这个弹窗调整css布局位置继续显示。

28411
领券