悬浮按钮开启网页编辑模式

在网页上显示一个悬浮按钮,点击按钮开启或关闭网页编辑模式。

  1. // ==UserScript==
  2. // @name 悬浮按钮开启网页编辑模式
  3. // @namespace http://tampermonkey/
  4. // @version 1.0
  5. // @description 在网页上显示一个悬浮按钮,点击按钮开启或关闭网页编辑模式。
  6. // @author 公众号酷玩安卓
  7. // @match *://*/*
  8. // @grant none
  9. // @license 用户可以修改btn.textContent来修改按钮显示文字, 可自行添加作用域
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. // 创建悬浮按钮
  16. var btn = document.createElement("button");
  17. btn.style.position = "fixed";
  18. btn.style.bottom = "20px";
  19. btn.style.right = "20px";
  20. btn.style.borderRadius = "50%";
  21. btn.style.width = "50px";
  22. btn.style.height = "50px";
  23. btn.style.backgroundColor = "#1E90FF";
  24. btn.style.color = "#fff";
  25. btn.style.fontSize = "24px";
  26. btn.style.fontWeight = "bold";
  27. btn.style.boxShadow = "0px 2px 5px #888";
  28. btn.textContent = "修";
  29.  
  30. // 添加按钮到页面中
  31. document.body.appendChild(btn);
  32.  
  33. // 点击按钮触发事件
  34. var isEditable = false;
  35. btn.onclick = function(){
  36. if(!isEditable){
  37. // 开启网页编辑模式
  38. document.documentElement.contentEditable = "true";
  39. btn.textContent = "关";
  40. isEditable = true;
  41. }else{
  42. // 关闭网页编辑模式
  43. document.documentElement.contentEditable = "false";
  44. btn.textContent = "开";
  45. isEditable = false;
  46. }
  47. };
  48. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址