返回

Chrome扩展打造工作拍档，与看板娘协力作战，告别摸鱼，提升专注

开发工具

从零开发一个 Chrome 扩展程序（自动给网页加个看板娘，盯着你认真工作/摸鱼）

前言

本文打算实现一个自动给网页添加一个看板娘的扩展，可以显示/隐藏，并且有持久化记录功能；根据网页的href记录是否开启看板娘；以及鼠标选中文本出现扩展自定义的menu事件；如图所示：

[图片]

技术选型

我们将使用以下技术来开发这个扩展程序：

  • HTML5
  • CSS3
  • JavaScript
  • Chrome Extension API

实现步骤

  1. 创建一个新的 Chrome 扩展程序项目。
  2. 在manifest.json文件中配置扩展程序的基本信息，包括名称、版本、等。
  3. 在background.js文件中编写扩展程序的后台逻辑。
  4. 在content.js文件中编写扩展程序的前端逻辑。
  5. 在popup.html和popup.js文件中创建扩展程序的弹出窗口。
  6. 在style.css文件中编写扩展程序的样式表。
  7. 将扩展程序打包成.crx文件。
  8. 将扩展程序发布到Chrome网上应用店。

详细步骤

  1. 创建一个新的 Chrome 扩展程序项目。

首先，打开Chrome浏览器，点击右上角的三个点，选择“更多工具”->“扩展程序”。然后，点击左上角的“开发人员模式”开关，再点击“加载已解压的扩展程序”。最后，选择您要开发的扩展程序的文件夹。

  1. 在manifest.json文件中配置扩展程序的基本信息。

manifest.json文件是扩展程序的配置文件，它包含了扩展程序的基本信息，包括名称、版本、等。

{
  "manifest_version": 2,
  "name": "看板娘助手",
  "version": "1.0",
  "description": "自动给网页添加一个看板娘，随时监督您的工作和学习。",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "tabs"
  ]
}
  1. 在background.js文件中编写扩展程序的后台逻辑。

background.js文件是扩展程序的后台逻辑文件，它负责处理扩展程序的后台任务。

// 监听浏览器动作按钮的点击事件
chrome.browserAction.onClicked.addListener(function(tab) {
  // 获取当前标签页的URL
  var url = tab.url;

  // 根据URL获取看板娘的状态
  var status = getBoardGirlStatus(url);

  // 如果看板娘未开启，则开启看板娘
  if (status == "off") {
    setBoardGirlStatus(url, "on");

    // 注入content.js文件到当前标签页
    chrome.tabs.executeScript(tab.id, {file: "content.js"});
  } else {
    // 如果看板娘已开启，则关闭看板娘
    setBoardGirlStatus(url, "off");

    // 从当前标签页移除content.js文件
    chrome.tabs.executeScript(tab.id, {code: "document.body.removeChild(document.getElementById('board-girl'))"});
  }
});

// 获取看板娘的状态
function getBoardGirlStatus(url) {
  var status = localStorage.getItem("board-girl-" + url);

  if (status == null) {
    status = "off";
  }

  return status;
}

// 设置看板娘的状态
function setBoardGirlStatus(url, status) {
  localStorage.setItem("board-girl-" + url, status);
}
  1. 在content.js文件中编写扩展程序的前端逻辑。

content.js文件是扩展程序的前端逻辑文件，它负责在当前标签页中显示看板娘。

// 创建看板娘元素
var boardGirl = document.createElement("div");
boardGirl.id = "board-girl";
boardGirl.style.position = "fixed";
boardGirl.style.bottom = "0";
boardGirl.style.right = "0";
boardGirl.style.width = "200px";
boardGirl.style.height = "200px";
boardGirl.style.backgroundImage = "url(board-girl.png)";
boardGirl.style.backgroundSize = "cover";

// 将看板娘元素添加到当前标签页中
document.body.appendChild(boardGirl);

// 监听鼠标移动事件
document.addEventListener("mousemove", function(e) {
  // 获取鼠标的坐标
  var x = e.clientX;
  var y = e.clientY;

  // 将看板娘元素移动到鼠标的坐标处
  boardGirl.style.left = x + "px";
  boardGirl.style.top = y + "px";
});

// 监听鼠标点击事件
document.addEventListener("click", function(e) {
  // 获取被点击的元素
  var target = e.target;

  // 如果被点击的元素是看板娘元素，则隐藏看板娘元素
  if (target == boardGirl) {
    boardGirl.style.display = "none";
  }
});
  1. 在popup.html和popup.js文件中创建扩展程序的弹出窗口。

popup.html文件是扩展程序的弹出窗口的HTML文件，popup.js文件是扩展程序的弹出窗口的JavaScript文件。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>看板娘助手</h1>
  <p>这是一个可以自动给网页添加一个看板娘的扩展程序。您可以使用这个扩展程序来监督您的工作和学习。</p>
  <button id="open-board-girl-button">开启看板娘</button>
  <button id="close-board-girl-button">关闭看板娘</button>
</body>
</html>

// 监听“开启看板娘”按钮的点击事件
document.getElementById("open-board-girl-button").addEventListener("click", function() {
  // 获取当前标签页的URL
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var url = tabs[0].url;

    // 根据URL获取看板娘的状态
    var status = getBoardGirlStatus(url);

    // 如果看板娘未开启，则开启看板娘
    if (status == "off") {
      setBoardGirlStatus(url, "on");

      // 注入content.js文件到当前标签页
      chrome.tabs.executeScript(tabs[0].id, {file: "content.js"});
    }
  });
});

// 监听“关闭看板娘”按钮的点击事件
document.getElementById("close-board-girl-button").addEventListener("click", function() {
  // 获取当前标签页的URL
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var url = tabs[0].url;

    // 根据URL获取看板娘的状态
    var status = getBoardGirlStatus(url);

    // 如果看板娘已开启，则关闭看板娘
    if (status == "on") {
      setBoardGirlStatus(url, "off");

      // 从当前标签页移除content.js文件
      chrome.tabs.executeScript(tabs[0].id, {code: "document.body.removeChild(document.getElementById('board-girl'))"});
    }
  });
});
  1. 在style.css文件中编写扩展程序的样式表。
#board-girl {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background-image: url(board-girl.png);
  background-size: cover;
}
  1. 将扩展程序打包成.crx文件。
cd /path/to/extension
zip -r extension.crx *
  1. 将扩展程序发布到Chrome网上应用店。

将.crx文件上传到Chrome网上应用店，并填写相关信息，即可发布扩展程序。

结语

本文介绍了如何从零开发一个Chrome扩展程序，并给出了一个自动给网页添加一个看板娘的扩展程序的示例。希望本文能对您有所帮助。