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

GitHub Star 过万,这款神器必须安利!

bookmarklet,亦称小书签,是一种微型 Web 应用,开发者通过将代码(通常是 JavaScript)存入浏览器书签,以构建出一个完整的小应用。...借助这个功能,我们便可以用它来写一些比较简单的 Web 应用,如给当前页面新增组件、导出网页数据、弹出提示框等基础功能。...说白了,创建一个 bookm‍arklet‍,主要通过以下几步来完成‍: 编写适用于当前浏览器的 JavaScript 代码; 将该代码进行转义,并存入书签; 打开书签,运行代码。...工具地址: https://mrcoles.com/bookmarklet/ 现在,我们回到刚刚那个话题:如何为 Git History 创建一个 bookmarklet?...作者很贴心的给出了相应的 JavaScript 代码,你只需要用上面那款 bookmarklet 转化工具,结合下方代码,即可快速完成。‍

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

    Bookmarklet编写指南

    前一段日子,我写了两个Bookmarklet----"短网址生成"和"短网址还原"。 它们用起来很方便,除了我本人之外,其他朋友也在用。第一次发布Bookmarklet,就能有用户,我挺满意的。...但是,它不是一个以"http://"开头的网址,而是一段Javascript代码,以"javascript:"开头。点击之后,会对当前页面执行某种操作。...不要污染全局变量 Bookmarklet最好不要生成新的全局变量,可以采用直接运行匿名函数的方式: javascript: (function(){...})(); 上面式子的第一个括号,定义了一个匿名函数...获取网页信息 获取当前页面的标题:document.title。 获取当前页面的URL: location.href。...连接外部javascript代码 有时,Bookmarklet必须再引入外部的Javascript代码,这就需要为当前页面添加一个script标签。

    1.5K90

    WordPress 快捷管理工具条:WordPress Admin Toolbar Bookmarklet

    但是如果下次想快速进入,又保存一个书签到浏览器的工具栏上?...WordPress Admin Toolbar Bookmarklet 是一个基于 Javascript 构建的的浏览器工具栏的 Bookmarklet,它能让你简单通过点击就能快速访问到 WordPress...一旦你把它拖到浏览器的快速工具栏的时候,你就可以通过点击它来访问当前 WordPress 站点的后台菜单: 使用 WordPress Admin Toolbar Bookmarklet 快捷访问后台菜单...你可以把下面的 Bookmarklet 拖到浏览器的工具栏试下: WP Toolbar 这个 Bookmarklet 的局限是首先要你把浏览器的当前页面设置为你的 WordPress 页面,并且还需要...如果这个 Bookmarklet 能够提供定制,能够自己定制 WordPress 博客的首页 URL,让我们能够在任何时候,任何页面都能快捷访问后台菜单,那会更加完美了

    20910

    JAVASCRIPT创建一个基于数组的栈结构

    栈拥有以下方法: push(element): 元素入栈, 添加一个或多个新元素到栈顶 pop(): 元素出栈,移除栈顶的元素,同时返回被移除的元素 peek(): 返回栈顶的元素,不对站内元素做任何修改...说明: 数组的头部就是栈底,数组的尾部就是栈顶 因为是基于javascript的数组构建的栈,所以会用到各种数组方法,首先创建一个类表示类,这里用到了ES6的语法,接下来便开始逐个实现栈中的6个常规方法...s1.声明栈构造函数 1 //在栈的构造函数中声明一个空数组用来保存栈内的元素 2 class Stack { 3 constructor() { 4 this.items = []; 5 } 6...pop方法 pop() { return this.items.pop(); } s4.实现peek()方法,查看栈顶元素,也就是最后添加进栈的元素 在数组中表现为数组最后一个索引位置的元素,访问数组的最后一个元素可以用...stack.clear(); //清栈,此时栈空了 console.log(stack.isEmpty()); //输出true 后面会再写一篇基于JavaScript

    1K30

    YouTube 开始测试视频下载

    其实下载 YouTube 导出的 MP4 文件,你可以使用以前下载 FLV 文件一样的 URL,然后在 URL 的最后附加上 "&fmt=18" 即可,如下: http://www.youtube.com...bookmarklet: Get YouTube video 你可以直接把上面的这个 bookmarklet 拖到你的浏览器的地址栏(in Firefox, Safari),或者右击并保存到收藏夹(in...然后当你在 YouTube 上浏览到你喜欢的视频的时候,点击下刚才的那个 bookmarklet 就会弹出一个下载窗口。...如果你嫌添加 bookmarklet 太麻烦或者根本就并不会(囧),那么你可以尝试下这个 Greasemonkey 脚本,他会在视频的下方自动添加下载链接,不过这样需要你的 Firefox 浏览器安装...Greasemonkey 扩展,Opera 已经内置了支持 userscript,你只需要到 Tools > Preferences > Advanced > Content > JavaScript

    66610

    5个博客分享的 Bookmarklet

    Bookmarklet 也叫小书签,它是一段 JavaScript 脚本,可以被拖到浏览器的快速工具栏中,也可以直接插入到网页中去,让你的用户直接使用该 Bookmarklet。...,你所要做的只需要把下面这段 JS 代码添加到你博客日志页面: javascript:var%20b=document.body;var%20GR________bookmarklet_domain...分享到豆瓣 豆瓣本身作为一个成熟的 Web 2.0 网站,已经有了固定的用户群,前面我讲到豆瓣九点渐现 Digg 效应,所以博客日志能够上到九点首页,能够给博客带来非常大的流量。...豆瓣九点的 Bookmarklet 为: 代码为: javascript" src="http://9.douban.com/js/button_widget.js...分享到鲜果 想过经过几次的改版和功能的改进,已经是国内的有名的 RSS 阅读器,而鲜果热文也是国内不错的 Digg 中心,鲜果提供了一个站外 Digg 按钮,但是需要一些简单的定制,需要你输入你的博客

    32110

    使用 Vanilla JavaScript 框架创建一个简单的天气应用

    最近我在浏览国外的一些技术网站时,这个词出现的频率实在是在太高了,好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢?...Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的JavaScript应用程序。...本篇文章,我将和大家一起使用原生 JavaScript 创建一个简单的天气查询应用。...API,之所以用这个,调用方便,通过URL地址传参就能进行调用,虽然高级功能需要付费,但是做个简单的天气查询应用,免费功能已经够用。...五、添加基础的样式 创建完基本的结构后,我们需要用 CSS 进行美化,如下代码所示我们定义了全局的颜色自定义变量,以及一些基础的样式外观,示例代码如下: :root { --bg_main: #0a1f44

    1.6K30

    使用 Vanilla JavaScript 框架创建一个简单的天气应用

    最近我在浏览国外的一些技术网站时,这个词出现的频率实在是太高了,好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢?...Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的JavaScript应用程序。...本篇文章,我将和大家一起使用原生 JavaScript 创建一个简单的天气查询应用。...四、创建HTML结构 基本工作准备完后,我们就开始动手实践吧! 我们先定义两个区域,第一个 section 区域,包含了应用名称、一个表单和一个提示信息文本。...五、添加基础的样式 创建完基本的结构后,我们需要用 CSS 进行美化,如下代码所示我们定义了全局的颜色自定义变量,以及一些基础的样式外观,示例代码如下: :root { --bg_main: #0a1f44

    1.7K20

    使用 HTML、CSS、JavaScript 创建一个简单的井字游戏

    使用 javascript 创建游戏是最有趣的学习方式。它会让你保持动力,这对于学习 Web 开发等复杂技能至关重要。...此外,你可以和你的朋友一起玩,或者只是向他们展示你做的小东西,他们也会感到很有趣的。在今天的博文中,我们将使用 HTML、CSS 和 Javascript 创建一个井字游戏。...演示地址:http://haiyong.site/xxoo2 实现 HTML 首先在 head 部分,我将包含我们稍后创建的 css 和 javascript 文件。...我们将用一个包含九个空字符串的数组来初始化一个板。这将保存板上每个图块的 X abd O 值。我们将有一个currentPlayer持有当前回合活跃的玩家的标志。...首先我们需要检查它是否是一个有效的动作,我们还将检查游戏当前是否处于活动状态。如果两者都为真,我们innerText用当前玩家的符号更新瓷砖的 ,添加相应的类并更新板阵列。

    2K21

    创建一个双模式跨运行时的 JavaScript 包

    本文将指导你发布双模式、跨运行时的 JavaScript 包。了解如何创建与 ESM 和 CommonJS 以及 Node.js、Deno 和浏览器等不同运行时兼容的库。...随着 JavaScript 开发的不断发展,人们越来越需要能在多种环境中运行的强大依赖包。在本文中,我们将探讨如何发布跨运行时、双模式的 JavaScript 包。...下面这个名为 scripts/build_npm.ts 的脚本使用 DNT 创建一个 /npm 文件夹,其中包含一个完整的 NPM 包,可以随时发布。...虽然 Deno 可以使用开箱即用的 npm 软件包,但要创建一个完整的跨运行时包,你还应该将其适配到 Deno。...总结 创建双模式、跨运行时的 JavaScript 包是一种有益的体验。它能使你的代码具有可移植性和可重用性,让你在不同的 JavaScript 环境中接触到更多的用户。

    17610

    只用30行代码就能创建一个JavaScript的神经网络?

    在本文中,我将向你展示如何使用Synaptic.js来创建和训练神经网络,它允许你在Node.js和浏览器中进行深度学习。我们将创建最简单的神经网络:一个能够解决XOR方程的问题。...但在我们看代码之前,我们先来看看神经网络的基本知识。 神经元和突触 神经网络的第一个组成部分是,神经元。神经元就像一个函数,它需要一些输入,然后返回一个输出。 有很多不同类型的神经元。...因为这是一个S形的神经元,它把任何值都压缩到0到1之间,输出被压缩到1。 如果你把这些神经网络连在一起,你就有了一个神经网络。这是通过神经元之间通过突触相互连接的神经传递的。如下图: ?...我们需要做的第一件事就是创建图层。我们在突触的new Layer()函数中这样做。传递给这个函数的数字决定了每个层应该有多少个神经元。...在每一个正向传播之后,我们需要做一个反向传播,在这个网络中,网络更新它自己的权重和偏差。

    76680

    又一个新的 JavaScript 运行时发布了!

    今天和大家一起来聊聊最近又一个新发布的 JavaScript 运行时:WinterJS。...名词有点多,可能有些大家还不清楚,我补充解释下: WinterCG:这是一个专注于协作和提高 JavaScript 运行时环境的 API 兼容性的社区。...他们通过在运行环境之间进行讨论,向规范制定团体(如 WHATWG、W3C)提出新的 Web API 或对当前 Web API 的修改提议,以及对现有运行环境行为的文档化,来完成这些工作。...自首次发布以来,WinterCG 就对以下常见 API 进行了兼容: 数据获取:fetch, URL, Request,Response 文件:Blob,File 流:ReadableStream, WritableStream...WinterJS 使用 下面是个最简单的示例,首先我们创建一个 serviceworker.js 文件: addEventListener('fetch', (req) => { req.respondWith

    39110

    网页翻译最轻量级方法【微软】翻译书签!!!

    还在为找一个好用的网站整页翻译的插件而烦恼吗?今天给大家推荐一个非常方便的翻译整篇网页的简单方法。...用chrome或者火狐等现代浏览器的人都知道,插件、扩展等丰富了我们使用浏览器的体验感受,但是大家都知道,插件安装太多会引起浏览变慢等等问题,秉着有扩展不用插件,有代码书签不用扩展的良好习惯,这里就给大家推荐一款翻译代码书签...在地址栏键入以下代码: (function(){var%20s%20=%20document.createElement('script');%20s.type%20=%20'text/javascript...';%20s.src%20=%20'<a _src=""http://labs.microsofttranslator.com/bookmarklet...20document.body.firstChild);})()"" href=""http://labs.microsofttranslator.com/bookmarklet

    40700

    如何使用 Spring 和 RabbitMQ 创建一个简单的发布和订阅应用程序?

    原标题:Spring认证中国教育管理中心-了解如何使用 Spring 和 RabbitMQ 创建一个简单的发布和订阅应用程序。...(内容来源:Spring中国教育管理中心) 本指南将引导您完成设置发布和订阅消息的 RabbitMQ AMQP 服务器以及创建 Spring Boot 应用程序以与该 RabbitMQ 服务器交互的过程...你也可以从 Github 上 fork 项目并在你的 IDE 或其他编辑器中打开它。 创建 RabbitMQ 消息接收器 对于任何基于消息传递的应用程序,您都需要创建一个响应已发布消息的接收器。...要发送消息,您还需要一个 Rabbit 模板。 该queue()方法创建一个 AMQP 队列。该exchange()方法创建主题交换。...您刚刚使用 Spring 和 RabbitMQ 开发了一个简单的发布和订阅应用程序。您可以使用Spring 和 RabbitMQ做比这里更多的事情,但本指南应该提供一个良好的开端。

    1.8K20

    可以提高web前端开发效率的6个浏览器书签,建议你赶快用起来吧

    还有什么更快的方法来启用它?当然是小书签!javascript: document.designMode="on";void 0;使用URL创建书签。...再次,为了创建书签,我们将创建一个 URL。...模拟事件意味着编写一个触发 JavaScript 事件的“一次性”按钮,从而更容易快速、重复地测试事件,而无需满足任何常见的面向用户的条件,例如需要登录。...假设您设置了JavaScript 事件侦听器,请为您要触发/模拟的每个事件创建一个书签并提交以下 URL: javascript: document.querySelector("SELECTOR")....是否有任何过度重复的 Web 开发工作流程需要您使用 Web 浏览器有时令人尴尬的开发人员工具?如果是这样,创建自己的省时书签非常容易。请记住以javascript:!开头的 URL。

    1.6K10
    领券