我攻克的技术难题: 我是如何解决开发中Chrome插件问题

原创

Michel_Rolle

修改于 2024-02-05 17:23:42

1.1K0

修改于 2024-02-05 17:23:42

大概有这样的需求。

在搜索资源，或者查找解决棘手bug的方法的时候，会经历很长时间来回不断地翻阅一些网站，有的问题甚至半年后还需要重新来过。那些曾经访问过且证明没有任何意义的网页，会因为一个“优秀的”标题而导致再次浪费我们的时间。所以为什么我们不能拉黑它们呢？

市面上的Chrome网站黑名单不少，比如有

UblackList，这个网站只能解决在搜索过程中不被检索到的黑名单。而且如果是想屏蔽某一个具体的网页，而不是整个网站，则需要单独加到黑名单。

这种在检索的时候会比较方便

BlockSite 不算太友好，操作不习惯

browse-manager 这是一款国人开发的插件，还不错，除了不支持快捷键。其他都比较方改变了。而且也能导出数据。

于是就想能不能自己也开发一款自己的Chrome插件

作为一名后端工程师，距离上次写前端代码还是刚毕业的时候，时间成本也有限。不太可能为了写一款插件而去刻意去学前端代码。但在如今大模型爆发的时代，很多人借助于ChatGPT来实现自己的Chrome插件。于是，说动手就动手。

所以，我开始向ChatGPT提出我的需求

于是给出了以下这些对话

当我一步一步按照它给我的步骤来实现时。前面还是挺顺的。

首先是添加方式。直接在这里就能添加了

刚开始的时候。因为把ChatGPT的代码复制过去后，就发现始终有一些没反应。然后几经折腾才发现在这里可以看到debug的信息。也就是

打开后就能看到这些了

后续发现是ChatGPT给出的事件不对。去查询后发现应该是使用 OnUpdated事件

接下来就是要去本地读取文件了。当浏览器输入地址栏时去匹配。看到有其他Chrome插件能直接导出导入数据，但是我在Chrome的extends里确实没看到文件。有大佬知道Chrome插件的数据保存在哪里的可以方便告知一下。

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'checkURL') {
    checkURL(request.url);
  }
});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  console.log('onUpdated');
  // 当地址栏URL变化时执行处理逻辑
  // if (changeInfo.url) {
    checkURL(changeInfo.url);
    console.log('地址栏URL变化：', changeInfo.url);
    // 在此处进行其他操作
  // }
});

function checkURL(url) {
  // 获取扩展目录中的文件路径
  var fileUrl = chrome.runtime.getURL('file.txt');

  // 使用 fetch API 读取文件内容
  fetch(fileUrl)
    .then(response => {
      if (!response.ok) {
        throw new Error(`Failed to fetch file: ${response.status}`);
      }
      return response.text();
    })
    .then(data => {
      // 成功获取文件内容
      var allowedURLs = data.split('\n').map(url => url.trim());
      if (allowedURLs.includes(url)) {
        // 如果地址在文件中，跳转到空白页
        console.log("URL is allowed. Redirecting to about:blank");
        chrome.tabs.update({url: 'about:blank'});
      } else {
        console.log("URL is not allowed. Redirecting to the original URL");
        // 否则，正常访问
        // chrome.tabs.update({url: url});
      }
    })
    .catch(error => {
      console.error('Failed to load file:', error);
    });
}

手动在txt文件里添加一行地址栏。 baidu.com

然后运行发现是能正常运行的

现在的问题就是如何利用快捷键来实现把Chrome的地址栏添加到文件夹里面了。开发Chrome插件的经验较少，所以目前不太知道如何设定一个快捷键来实现这一功能

于是曲线救国，在这里曾经分享过如何来利用alfred来实现对一些快捷操作来完成的。这里的思路也借鉴这里

首先是自定义一个快捷键。来唤起。当然自定义的这个快捷键要跟其他的没有冲突才行

首先想的是定义三个快捷键。然后在最后一个快捷键来对一个脚本的执行。比如

a. 先 option + a 来唤起

b. 然后command+l 定位到地址栏

c. 最后command+c 复制地址栏

d. 最后把得到的地址栏通过一个脚本来写到一个文件里去，这里使用shell和python都行。

#!/bin/bash

# Get the clipboard content
clipboard_content=$(pbpaste)

# Specify the path and filename for the output file
output_file="xxxx/file.txt"

# Check if the content contains "http"
if [[ $clipboard_content == *http* ]]; then
    # Check if the content already exists in the file
    if grep -qF "$clipboard_content" "$output_file"; then
        echo "Content already exists. Not writing to the file."
    else
        # Append clipboard content to the specified file
        echo "$clipboard_content" >> "$output_file"
        echo "Content written to the file."
    fi
else
    echo "Clipboard content does not contain 'http'. Not writing to the file."
fi

以上这是shell脚本的内容，为了防止误触碰，则判定如果复制的东西里有http的话，才会被写到文件里去。

但是后续发现这样并不太好使，所以改为从shell脚本里执行快捷键的命令

即添加这两行即可

osascript -e 'tell application "System Events" to keystroke "l" using {command down}'
osascript -e 'tell application "System Events" to keystroke "c" using {command down}'

所以最终就变成了这样的，只需要一个快捷键，就能实现这个功能了。

当然在这过程中并非也一直这么顺利，有一些类似于的错误，好在ChatGPT大部分也都能一一解决

The error you're encountering, "ReferenceError: XMLHttpRequest is not defined," suggests that the XMLHttpRequest object is not available in the background script of your Chrome extension. This is because Chrome extensions use a content security policy that restricts the use of inline scripts, and XMLHttpRequest is not allowed in the background script directly.

一些思考

待解决