有关Chrome浏览器扩充功能，浏览页面有出现 .doc 或 .xlx文字，出现阻挡画面

Question

这是我的 manifest.json 档案

{
  "manifest_version": 3,
  "name": "上传类型提醒",
  "version": "1.0",
  "permissions": ["activeTab", "tabs", "webRequest",
"declarativeNetRequest"],
  "content_scripts": [
  {
  "matches": ["<all_urls>"],
  "js": ["background.js"]
  }
  ]
}

这是我的 background.js 档案

document.addEventListener('change', function(event) {
  const input = event.target;
  if (input.type === 'file') {
  const files = input.files;
  for (let i = 0; i < files.length; i++) {
  const fileName = files[i].name.toLowerCase();
  if (fileName.endsWith('.bmp') ||
  fileName.endsWith('.png') ||
  fileName.endsWith('.gif') ||
  fileName.endsWith('.doc') ||
  fileName.endsWith('.docx') ||
  fileName.endsWith('.xls') ||
  fileName.endsWith('.xlsx')) {

  alert('此文件类型不允许上传：' + files[i].name);
  input.value = ''; // 清空档案输入

  // 使用 setTimeout 在 0.001 秒后关闭目前标签页
  setTimeout(() => {
  window.location.href = 'about:blank'; // 跳到一个空白页
  }, 1); // 1 毫秒 = 0.001 秒

  break;
  }
  }
  }
});

我想再加入
如果我浏览到某个指定网站时
如果浏览页面有出现 .doc 或 .xlx 或 .bmp 或 .png 这些文字的时候
就像我的 background.js 档案 里面一样
出现阻挡画面，然后再0.001秒 后自动跳到另一个空白页

Answer 1

让【道友老李】来帮你解答，本回答参考gpt编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。

如果答案让您满意，请采纳、关注，非常感谢！

为了满足您的需求，您希望在特定的网页上检测文本内容，并在找到某些特定的文件扩展名相关的文本时，提示用户并跳转到空白页面。为此，我们可以扩展您现有的 `background.js` 文件，添加额外的监听器，来处理网页内容。 下面是一个规范化的解决方案，包括如何修改 `manifest.json` 文件和 `background.js` 文件。

1. 更新 manifest.json 文件

确保您的 manifest.json 文件正确配置，以便允许内容脚本能够与网页交互。您可能需要将 content_scripts 中的 JavaScript 文件替换为 content.js 文件。下面是更新后的 manifest.json 示例：

{
  "manifest_version": 3,
  "name": "上传类型提醒",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "tabs",
    "webRequest",
    "declarativeNetRequest"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

2. 创建 content.js 文件

此脚本将用于在特定网站中检查页面内容。以下是 content.js 的代码，将在文档中查找特定的文件扩展名字符串：

// content.js
// 函数：检测特定文本
function checkForFileTypes() {
  const forbiddenTypes = ['.bmp', '.png', '.gif', '.doc', '.docx', '.xls', '.xlsx'];
  const bodyText = document.body.innerText.toLowerCase();
  // 判断是否包含限制类型的文本
  for (const type of forbiddenTypes) {
    if (bodyText.includes(type)) {
      alert('此页面包含不允许的文件类型：' + type);
      window.location.href = 'about:blank'; // 跳转到空白页
      break;
    }
  }
}
// 当DOM加载完成后，检测文件类型
document.addEventListener('DOMContentLoaded', checkForFileTypes);

3. 更新 background.js 文件（如果需要）

虽然您的 background.js 已经处理了文件上传的警告，但对网页内容的检测需要在 content.js 中实现。原本的代码可以保持不变，或者您可以添加一些逻辑来处理背景相关的请求逻辑。

// background.js
document.addEventListener('change', function(event) {
    const input = event.target;
    if (input.type === 'file') {
        const files = input.files;
        for (let i = 0; i < files.length; i++) {
            const fileName = files[i].name.toLowerCase();
            if (fileName.endsWith('.bmp') || fileName.endsWith('.png') || 
                fileName.endsWith('.gif') || fileName.endsWith('.doc') || 
                fileName.endsWith('.docx') || fileName.endsWith('.xls') || 
                fileName.endsWith('.xlsx')) {
                alert('此文件类型不允许上传：' + files[i].name);
                input.value = ''; // 清空档案输入
                setTimeout(() => {
                    window.location.href = 'about:blank'; // 跳到一个空白页
                }, 1); // 1 毫秒 = 0.001 秒
                break;
            }
        }
    }
});

结论

此更新将确保当您访问带有特定文件类型的文本内容的任何网站时，适当的警告会弹出，并且页面会跳转到空白页。请注意，您还可以根据需求进一步定制代码，并添加更多的文件类型进行检测。确保您的 Chrome 扩展在开发模式下启用，并正确加载了所有的 JavaScript 文件。