• 日期: 2027-10-16
  • 标签: 常规

浏览器扩展：背景更换器

这款浏览器扩展允许您为所有打开的网站选择背景，您可以使用颜色、图片或视频作为背景。此外，还包含一个恢复默认浏览器背景的按钮。

功能:

  • 选择颜色作为背景
  • 使用链接选择图片作为背景
  • 使用链接选择视频作为背景
  • 恢复默认浏览器背景

安装:

  1. 下载扩展程序代码
  2. 打开浏览器的扩展程序管理页面
  3. 点击“加载解压缩的扩展程序”
  4. 选择扩展程序代码所在的文件夹

使用:

  1. 打开浏览器扩展的弹窗
  2. 选择您喜欢的背景类型：颜色、图片或视频
  3. 填写链接地址
  4. 点击“应用”按钮

代码:

{
  'manifest_version': 2,
  'name': 'Background Changer',
  'version': '1.0',
  'description': 'A plugin that allows you to choose a background for all open sites.',
  'icons': {
    '48': 'icons/icon48.png',
    '96': 'icons/icon96.png'
  },
  'browser_action': {
    'default_icon': {
      '48': 'icons/icon48.png',
      '96': 'icons/icon96.png'
    },
    'default_title': 'Background Changer',
    'default_popup': 'popup.html'
  },
  'permissions': [
    'activeTab'
  ]
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Background Changer</title>
    <style>
      body {
        width: 300px;
        height: 200px;
        padding: 10px;
        font-size: 14px;
        font-family: Arial, sans-serif;
        background-color: #fff;
        color: #000;
      }
      h1 {
        font-size: 18px;
        margin: 0 0 10px;
      }
      label {
        display: block;
        margin: 10px 0 0;
      }
      input[type='radio'] {
        margin-right: 5px;
      }
      .button {
        display: inline-block;
        margin: 10px 0 0;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        background-color: #0074D9;
        color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        cursor: pointer;
      }
      .button:hover {
        background-color: #2ECC40;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h1>Background Changer</h1>
    <form id='options-form'>
      <label><input type='radio' name='background' value='white' checked> White</label>
      <label><input type='radio' name='background' value='gray'> Gray</label>
      <label><input type='radio' name='background' value='blue'> Blue</label>
      <button type='submit' class='button'>Apply</button>
    </form>
    <br>
    <button id='toggle-button' class='button'>Disable</button>
    <script src='popup.js'></script>
  </body>
</html>

let backgrounds = {
  white: '#fff',
  gray: '#ddd',
  blue: '#0074D9'
};

function applyBackground(color) {
  let code = 'document.body.style.backgroundColor = '' + backgrounds[color] + '';';
  browser.tabs.executeScript({code: code});
}

function applyImageBackground(url) {
  let code = 'document.body.style.backgroundImage = 'url(' + url + ')';';
  browser.tabs.executeScript({code: code});
}

function applyVideoBackground(url) {
  let code = 'document.body.innerHTML = '<video autoplay loop muted style='position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: -1;'><source src='' + url + '' type='video/mp4'></video>'';
  browser.tabs.executeScript({code: code});
}

function resetBackground() {
  let code = 'document.body.style.background = ''';
  browser.tabs.executeScript({code: code});
}

function togglePlugin() {
  browser.storage.local.get('enabled').then((result) => {
    let enabled = result.enabled === undefined ? true : !result.enabled;
    browser.storage.local.set({enabled: enabled});
    document.getElementById('toggle-button').textContent = enabled ? 'Disable' : 'Enable';
    if (enabled) {
      browser.storage.local.get('backgroundType').then((result) => {
        let backgroundType = result.backgroundType;
        if (backgroundType === 'color') {
          browser.storage.local.get('backgroundColor').then((result) => {
            let backgroundColor = result.backgroundColor || 'white';
            applyBackground(backgroundColor);
          });
        } else if (backgroundType === 'image') {
          browser.storage.local.get('backgroundImageURL').then((result) => {
            let backgroundImageURL = result.backgroundImageURL;
            if (backgroundImageURL) {
              applyImageBackground(backgroundImageURL);
            }
          });
        } else if (backgroundType === 'video') {
          browser.storage.local.get('backgroundVideoURL').then((result) => {
            let backgroundVideoURL = result.backgroundVideoURL;
            if (backgroundVideoURL) {
              applyVideoBackground(backgroundVideoURL);
            }
          });
        }
      });
    } else {
      resetBackground();
    }
  });
}

document.addEventListener('DOMContentLoaded', () => {
  let form = document.getElementById('options-form');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    let color = form.querySelector('input[name='background']:checked').value;
    browser.storage.local.set({backgroundType: 'color', backgroundColor: color});
    applyBackground(color);
  });

  let imageForm = document.getElementById('image-form');
  imageForm.addEventListener('submit', (e) => {
    e.preventDefault();
    let url = imageForm.querySelector('input[name='image-url']').value;
    browser.storage.local.set({backgroundType: 'image', backgroundImageURL: url});
    applyImageBackground(url);
  });

  let videoForm = document.getElementById('video-form');
  videoForm.addEventListener('submit', (e) => {
    e.preventDefault();
    let url = videoForm.querySelector('input[name='video-url']').value;
    browser.storage.local.set({backgroundType: 'video', backgroundVideoURL: url});
    applyVideoBackground(url);
  });

  let button = document.getElementById('toggle-button');
  button.addEventListener('click', () => {
    togglePlugin();
  });

  browser.storage.local.get('enabled').then((result) => {
    let enabled = result.enabled === undefined ? true : result.enabled;
    browser.storage.local.set({enabled: enabled});
    document.getElementById('toggle-button').textContent = enabled ? 'Disable' : 'Enable';
    if (enabled) {
      browser.storage.local.get('backgroundType').then((result) => {
        let backgroundType = result.backgroundType;
        if (backgroundType === 'color') {
          browser.storage.local.get('backgroundColor').then((result) => {
            let backgroundColor = result.backgroundColor || 'white';
            applyBackground(backgroundColor);
          });
        } else if (backgroundType === 'image') {
          browser.storage.local.get('backgroundImageURL').then((result) => {
            let backgroundImageURL = result.backgroundImageURL;
            if (backgroundImageURL) {
              applyImageBackground(backgroundImageURL);
            }
          });
        } else if (backgroundType === 'video') {
          browser.storage.local.get('backgroundVideoURL').then((result) => {
            let backgroundVideoURL = result.backgroundVideoURL;
            if (backgroundVideoURL) {
              applyVideoBackground(backgroundVideoURL);
            }
          });
        }
      });
    } else {
      resetBackground();
    }
  });
});

扩展使用说明

  1. 下载代码: 您可以从 GitHub 下载扩展程序代码。
  2. 加载扩展程序: 打开浏览器的扩展程序管理页面，点击“加载解压缩的扩展程序”，选择下载的代码文件夹即可。
  3. 使用扩展程序: 点击浏览器工具栏上的扩展程序图标，即可打开扩展程序弹窗，选择您喜欢的背景类型，填写链接地址，并点击“应用”按钮。

扩展功能

  • 选择颜色作为背景: 您可以选择白色、灰色或蓝色作为背景。
  • 使用链接选择图片作为背景: 您可以输入图片的链接地址，将图片设置为背景。
  • 使用链接选择视频作为背景: 您可以输入视频的链接地址，将视频设置为背景。
  • 恢复默认浏览器背景: 点击“禁用”按钮，即可恢复默认浏览器背景。

扩展更新

  • 1.0 版本: 初始版本，提供基本功能。

开发者联系方式

如果您有任何问题或建议，请随时与我们联系：

  • 电子邮件：your.email@example.com
  • 网站：your-website.com

扩展版权

本扩展程序为开源项目，遵循 MIT 许可证。

浏览器扩展：背景更换器 - 选择图片或视频作为背景，并恢复默认浏览器背景

原文地址: https://www.cveoy.top/t/topic/njt9 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录