NativeMindExtension-浏览器扩展

NativeMindExtension 是一个开源的浏览器扩展，旨在提升用户的浏览体验和工作效率。它提供了多种实用功能，包括页面增强、快捷键操作、数据收集、隐私保护等，是浏览器使用者的得力助手。

主要特性

🚀 页面增强

页面优化: 自动优化网页布局和加载速度
内容过滤: 过滤广告、弹窗和无关内容
阅读模式: 提供清爽的阅读体验
夜间模式: 支持深色主题和护眼模式

⌨️ 快捷键操作

自定义快捷键: 支持自定义各种操作快捷键
手势操作: 支持鼠标手势和触摸手势
快速搜索: 一键搜索选中文本
页面操作: 快速刷新、前进、后退等操作

📊 数据管理

书签管理: 智能书签分类和搜索
历史记录: 增强的历史记录管理
标签页管理: 批量标签页操作和管理
数据同步: 支持多设备数据同步

🔒 隐私保护

跟踪阻止: 阻止网站跟踪和指纹识别
隐私模式: 增强的隐私浏览模式
数据清理: 自动清理浏览数据
权限控制: 精细控制网站权限

项目地址

NativeMindExtension - Github NativeMindExtension - 官网

安装配置

1. 从商店安装

# Chrome Web Store
# 访问 https://chrome.google.com/webstore/detail/nativemind-extension

# Firefox Add-ons
# 访问 https://addons.mozilla.org/firefox/addon/nativemind-extension

# Edge Add-ons
# 访问 https://microsoftedge.microsoft.com/addons/detail/nativemind-extension

2. 开发版安装

# 1. 克隆仓库
git clone https://github.com/nativemind/extension.git
cd extension

# 2. 安装依赖
npm install

# 3. 构建扩展
npm run build

# 4. 加载扩展
# Chrome: 打开扩展管理页面，开启开发者模式，点击"加载已解压的扩展程序"
# Firefox: 打开about:debugging，点击"此Firefox"，点击"临时载入附加组件"

3. 源码开发

# 开发环境设置
npm run dev

# 监听文件变化
npm run watch

# 构建生产版本
npm run build:prod

# 运行测试
npm run test

# 代码检查
npm run lint

基础配置

1. 扩展配置

{
  "manifest_version": 3,
  "name": "NativeMind Extension",
  "version": "1.0.0",
  "description": "A powerful browser extension for enhanced browsing experience",
  
  "permissions": [
    "activeTab",
    "storage",
    "bookmarks",
    "history",
    "tabs",
    "webNavigation",
    "webRequest"
  ],
  
  "host_permissions": [
    "<all_urls>"
  ],
  
  "background": {
    "service_worker": "background.js"
  },
  
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["content.css"]
    }
  ],
  
  "action": {
    "default_popup": "popup.html",
    "default_title": "NativeMind"
  },
  
  "options_page": "options.html"
}

2. 功能配置

// 默认配置
const defaultConfig = {
  // 页面增强
  pageEnhancement: {
    enabled: true,
    readingMode: true,
    nightMode: false,
    adBlock: true,
    popupBlock: true
  },
  
  // 快捷键设置
  shortcuts: {
    enabled: true,
    readingMode: 'Ctrl+Shift+R',
    nightMode: 'Ctrl+Shift+N',
    quickSearch: 'Ctrl+Shift+S',
    bookmarkPage: 'Ctrl+Shift+B'
  },
  
  // 隐私保护
  privacy: {
    enabled: true,
    trackBlocking: true,
    fingerprintBlocking: true,
    autoCleanup: true,
    cleanupInterval: 3600000 // 1小时
  },
  
  // 数据同步
  sync: {
    enabled: false,
    server: '',
    username: '',
    password: ''
  }
};

3. 用户界面

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>NativeMind</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>NativeMind</h1>
      <button id="settings" class="icon-button">⚙️</button>
    </header>
    
    <main>
      <section class="quick-actions">
        <button id="reading-mode" class="action-button">
          <span class="icon">📖</span>
          <span class="label">阅读模式</span>
        </button>
        
        <button id="night-mode" class="action-button">
          <span class="icon">🌙</span>
          <span class="label">夜间模式</span>
        </button>
        
        <button id="bookmark" class="action-button">
          <span class="icon">🔖</span>
          <span class="label">收藏页面</span>
        </button>
      </section>
      
      <section class="stats">
        <div class="stat-item">
          <span class="label">已阻止广告</span>
          <span class="value" id="ads-blocked">0</span>
        </div>
        
        <div class="stat-item">
          <span class="label">已阻止跟踪</span>
          <span class="value" id="trackers-blocked">0</span>
        </div>
      </section>
    </main>
  </div>
  
  <script src="popup.js"></script>
</body>
</html>

高级功能

1. 内容脚本

// content.js - 内容脚本
class PageEnhancer {
  constructor() {
    this.config = {};
    this.init();
  }
  
  async init() {
    // 加载配置
    this.config = await this.loadConfig();
    
    // 初始化功能
    if (this.config.pageEnhancement.enabled) {
      this.initPageEnhancement();
    }
    
    if (this.config.privacy.enabled) {
      this.initPrivacyProtection();
    }
  }
  
  async loadConfig() {
    return new Promise((resolve) => {
      chrome.storage.sync.get('config', (result) => {
        resolve(result.config || defaultConfig);
      });
    });
  }
  
  initPageEnhancement() {
    // 阅读模式
    if (this.config.pageEnhancement.readingMode) {
      this.initReadingMode();
    }
    
    // 夜间模式
    if (this.config.pageEnhancement.nightMode) {
      this.initNightMode();
    }
    
    // 广告拦截
    if (this.config.pageEnhancement.adBlock) {
      this.initAdBlocking();
    }
  }
  
  initReadingMode() {
    // 检测文章内容
    const article = this.detectArticle();
    if (article) {
      this.createReadingModeButton();
    }
  }
  
  detectArticle() {
    // 检测文章内容的算法
    const selectors = [
      'article',
      '[role="main"]',
      '.post-content',
      '.article-content',
      '.entry-content'
    ];
    
    for (const selector of selectors) {
      const element = document.querySelector(selector);
      if (element && this.isArticleContent(element)) {
        return element;
      }
    }
    
    return null;
  }
  
  isArticleContent(element) {
    const text = element.textContent;
    const wordCount = text.split(/\s+/).length;
    const linkCount = element.querySelectorAll('a').length;
    
    // 简单的文章检测逻辑
    return wordCount > 200 && linkCount < wordCount / 50;
  }
  
  createReadingModeButton() {
    const button = document.createElement('button');
    button.id = 'nativemind-reading-mode';
    button.innerHTML = '📖';
    button.title = '阅读模式';
    button.className = 'nativemind-button';
    
    button.addEventListener('click', () => {
      this.toggleReadingMode();
    });
    
    document.body.appendChild(button);
  }
  
  toggleReadingMode() {
    const isActive = document.body.classList.contains('nativemind-reading-mode');
    
    if (isActive) {
      this.disableReadingMode();
    } else {
      this.enableReadingMode();
    }
  }
  
  enableReadingMode() {
    document.body.classList.add('nativemind-reading-mode');
    
    // 创建阅读模式样式
    const style = document.createElement('style');
    style.id = 'nativemind-reading-style';
    style.textContent = `
      .nativemind-reading-mode {
        background: #f8f9fa !important;
        color: #333 !important;
      }
      
      .nativemind-reading-mode * {
        background: transparent !important;
        color: inherit !important;
      }
      
      .nativemind-reading-mode article,
      .nativemind-reading-mode [role="main"] {
        max-width: 800px !important;
        margin: 0 auto !important;
        padding: 20px !important;
        font-size: 18px !important;
        line-height: 1.6 !important;
      }
    `;
    
    document.head.appendChild(style);
  }
  
  disableReadingMode() {
    document.body.classList.remove('nativemind-reading-mode');
    const style = document.getElementById('nativemind-reading-style');
    if (style) {
      style.remove();
    }
  }
}

// 初始化页面增强器
new PageEnhancer();

2. 后台脚本

// background.js - 后台脚本
class BackgroundManager {
  constructor() {
    this.stats = {
      adsBlocked: 0,
      trackersBlocked: 0,
      pagesVisited: 0
    };
    
    this.init();
  }
  
  init() {
    // 监听网络请求
    chrome.webRequest.onBeforeRequest.addListener(
      this.handleRequest.bind(this),
      { urls: ["<all_urls>"] },
      ["blocking"]
    );
    
    // 监听标签页更新
    chrome.tabs.onUpdated.addListener(this.handleTabUpdate.bind(this));
    
    // 监听扩展安装
    chrome.runtime.onInstalled.addListener(this.handleInstall.bind(this));
    
    // 定期清理数据
    this.startCleanupTimer();
  }
  
  handleRequest(details) {
    const url = details.url;
    
    // 广告拦截
    if (this.isAd(url)) {
      this.stats.adsBlocked++;
      return { cancel: true };
    }
    
    // 跟踪器拦截
    if (this.isTracker(url)) {
      this.stats.trackersBlocked++;
      return { cancel: true };
    }
    
    return { cancel: false };
  }
  
  isAd(url) {
    const adPatterns = [
      /ads?\./,
      /analytics\./,
      /tracking\./,
      /pixel\./,
      /beacon\./
    ];
    
    return adPatterns.some(pattern => pattern.test(url));
  }
  
  isTracker(url) {
    const trackerPatterns = [
      /google-analytics\.com/,
      /facebook\.com\/tr/,
      /doubleclick\.net/,
      /googlesyndication\.com/
    ];
    
    return trackerPatterns.some(pattern => pattern.test(url));
  }
  
  handleTabUpdate(tabId, changeInfo, tab) {
    if (changeInfo.status === 'complete') {
      this.stats.pagesVisited++;
      this.updateStats();
    }
  }
  
  handleInstall(details) {
    if (details.reason === 'install') {
      // 首次安装，设置默认配置
      chrome.storage.sync.set({
        config: defaultConfig,
        stats: this.stats
      });
    }
  }
  
  updateStats() {
    chrome.storage.sync.set({ stats: this.stats });
  }
  
  startCleanupTimer() {
    setInterval(() => {
      this.cleanupData();
    }, 3600000); // 每小时清理一次
  }
  
  async cleanupData() {
    const config = await this.getConfig();
    
    if (config.privacy.autoCleanup) {
      // 清理浏览数据
      const oneHourAgo = Date.now() - 3600000;
      
      chrome.browsingData.remove({
        "since": oneHourAgo
      }, {
        "appcache": true,
        "cache": true,
        "cookies": true,
        "downloads": true,
        "fileSystems": true,
        "formData": true,
        "history": true,
        "indexedDB": true,
        "localStorage": true,
        "passwords": true,
        "serviceWorkers": true,
        "webSQL": true
      });
    }
  }
  
  async getConfig() {
    return new Promise((resolve) => {
      chrome.storage.sync.get('config', (result) => {
        resolve(result.config || defaultConfig);
      });
    });
  }
}

// 初始化后台管理器
new BackgroundManager();

3. 快捷键处理

// 快捷键处理
class ShortcutManager {
  constructor() {
    this.shortcuts = {};
    this.init();
  }
  
  async init() {
    const config = await this.getConfig();
    
    if (config.shortcuts.enabled) {
      this.registerShortcuts(config.shortcuts);
    }
  }
  
  registerShortcuts(shortcutConfig) {
    // 注册快捷键
    chrome.commands.onCommand.addListener((command) => {
      this.handleCommand(command);
    });
    
    // 设置快捷键
    chrome.commands.update({
      'toggle-reading-mode': {
        suggested_key: {
          default: shortcutConfig.readingMode || 'Ctrl+Shift+R'
        },
        description: '切换阅读模式'
      },
      
      'toggle-night-mode': {
        suggested_key: {
          default: shortcutConfig.nightMode || 'Ctrl+Shift+N'
        },
        description: '切换夜间模式'
      },
      
      'quick-search': {
        suggested_key: {
          default: shortcutConfig.quickSearch || 'Ctrl+Shift+S'
        },
        description: '快速搜索'
      }
    });
  }
  
  handleCommand(command) {
    switch (command) {
      case 'toggle-reading-mode':
        this.toggleReadingMode();
        break;
      case 'toggle-night-mode':
        this.toggleNightMode();
        break;
      case 'quick-search':
        this.quickSearch();
        break;
    }
  }
  
  async toggleReadingMode() {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    chrome.tabs.sendMessage(tab.id, {
      action: 'toggleReadingMode'
    });
  }
  
  async toggleNightMode() {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    chrome.tabs.sendMessage(tab.id, {
      action: 'toggleNightMode'
    });
  }
  
  async quickSearch() {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    
    chrome.tabs.sendMessage(tab.id, {
      action: 'quickSearch'
    });
  }
  
  async getConfig() {
    return new Promise((resolve) => {
      chrome.storage.sync.get('config', (result) => {
        resolve(result.config || defaultConfig);
      });
    });
  }
}

// 初始化快捷键管理器
new ShortcutManager();

使用场景

1. 日常浏览

# 日常浏览增强
适用场景:
  - 网页阅读
  - 内容过滤
  - 隐私保护
  - 快速操作
功能:
  - 阅读模式
  - 广告拦截
  - 夜间模式
  - 快捷键操作

2. 工作效率

# 工作效率提升
适用场景:
  - 信息收集
  - 书签管理
  - 标签页管理
  - 数据同步
功能:
  - 智能书签
  - 批量操作
  - 数据导出
  - 云端同步

3. 隐私保护

# 隐私保护
适用场景:
  - 防止跟踪
  - 数据清理
  - 权限控制
  - 安全浏览
功能:
  - 跟踪阻止
  - 指纹保护
  - 自动清理
  - 权限管理

性能优化

1. 内存管理

// 内存优化
class MemoryManager {
  constructor() {
    this.cache = new Map();
    this.maxCacheSize = 100;
  }
  
  set(key, value, ttl = 300000) { // 5分钟TTL
    this.cache.set(key, {
      value,
      timestamp: Date.now(),
      ttl
    });
    
    // 清理过期缓存
    this.cleanup();
  }
  
  get(key) {
    const item = this.cache.get(key);
    if (!item) return null;
    
    if (Date.now() - item.timestamp > item.ttl) {
      this.cache.delete(key);
      return null;
    }
    
    return item.value;
  }
  
  cleanup() {
    if (this.cache.size > this.maxCacheSize) {
      const entries = Array.from(this.cache.entries());
      entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
      
      const toDelete = entries.slice(0, this.cache.size - this.maxCacheSize);
      toDelete.forEach(([key]) => this.cache.delete(key));
    }
  }
}

2. 网络优化

// 网络请求优化
class NetworkOptimizer {
  constructor() {
    this.requestCache = new Map();
    this.pendingRequests = new Map();
  }
  
  async request(url, options = {}) {
    // 检查缓存
    const cacheKey = this.getCacheKey(url, options);
    const cached = this.requestCache.get(cacheKey);
    
    if (cached && Date.now() - cached.timestamp < 300000) { // 5分钟缓存
      return cached.data;
    }
    
    // 检查是否有相同请求正在进行
    if (this.pendingRequests.has(cacheKey)) {
      return this.pendingRequests.get(cacheKey);
    }
    
    // 发起请求
    const promise = fetch(url, options).then(response => {
      const data = response.json();
      
      // 缓存结果
      this.requestCache.set(cacheKey, {
        data,
        timestamp: Date.now()
      });
      
      this.pendingRequests.delete(cacheKey);
      return data;
    });
    
    this.pendingRequests.set(cacheKey, promise);
    return promise;
  }
  
  getCacheKey(url, options) {
    return `${url}-${JSON.stringify(options)}`;
  }
}

3. 事件优化

// 事件优化
class EventOptimizer {
  constructor() {
    this.debounceTimers = new Map();
    this.throttleTimers = new Map();
  }
  
  debounce(key, func, delay = 300) {
    if (this.debounceTimers.has(key)) {
      clearTimeout(this.debounceTimers.get(key));
    }
    
    const timer = setTimeout(() => {
      func();
      this.debounceTimers.delete(key);
    }, delay);
    
    this.debounceTimers.set(key, timer);
  }
  
  throttle(key, func, delay = 100) {
    if (this.throttleTimers.has(key)) {
      return;
    }
    
    func();
    
    const timer = setTimeout(() => {
      this.throttleTimers.delete(key);
    }, delay);
    
    this.throttleTimers.set(key, timer);
  }
}

常见问题

Q: 扩展影响网页加载速度？

A: 优化内容脚本执行时机，使用异步加载，减少DOM操作频率。

Q: 如何自定义快捷键？

A: 在扩展设置页面中修改快捷键配置，或使用浏览器快捷键设置。

Q: 数据同步失败怎么办？

A: 检查网络连接，确认同步服务器配置，尝试手动同步。

Q: 如何禁用特定功能？

A: 在扩展设置页面中关闭不需要的功能，或使用白名单模式。

总结

NativeMindExtension 是一个功能强大的浏览器扩展，具有以下优势：

✅ 完全免费开源
✅ 功能丰富
✅ 易于使用
✅ 性能优异
✅ 隐私保护
✅ 高度可定制

NativeMindExtension 特别适合需要提升浏览体验和工作效率的用户。

使用浏览器扩展时请注意权限设置，定期更新扩展版本以获得最新功能和安全修复。

翻过墙

翻过墙