舰娘收藏全屏助手 - 提督制作指南

插件情报

这是一个极简的 Chrome/Edge 浏览器扩展，专为解决《舰队Collection》网页版周围留白过多、无法全屏沉浸游戏的问题。通过注入 CSS，它能让游戏画面强制撑满浏览器窗口。

↔️ 100% 宽度模式 左右撑满，适合竖屏，保持比例。

↕️ 100% 高度模式 上下撑满，最适合普通 16:9 屏幕，沉浸感极佳。

⚠️

已知缺点 (Known Issue)：
由于本插件强制修改了 DMM 复杂的网页结构，当您退出全屏模式后，网页排版可能会错乱（例如画面变白、元素重叠）。
解决方法：只需按 F5 刷新网页，即可恢复原状。

STEP 1：构建插件文件

请在电脑上新建一个文件夹（例如命名为 KC_Fullscreen），然后创建以下三个文本文件，并将代码完整复制进去。

1. manifest.json (配置文件)

manifest.json

{
  "manifest_version": 3,
  "name": "KanColle Fullscreen Helper",
  "version": "1.2",
  "description": "Play KanColle (Fleet Collection) in full screen with options for 100% width or 100% height scaling.",
  "permissions": ["activeTab", "scripting"],
  "host_permissions": ["<all_urls>"],
  "action": {
    "default_popup": "popup.html",
    "default_title": "Toggle Fullscreen"
  }
}

2. popup.html (界面文件)

popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 200px; padding: 10px; font-family: 'Arial', sans-serif; text-align: center;
    }
    button {
      width: 100%; padding: 10px; margin-bottom: 10px;
      background-color: #4CAF50; color: white;
      border: none; border-radius: 5px; cursor: pointer;
      font-size: 14px; transition: background 0.3s;
    }
    button:last-of-type { margin-bottom: 0; }
    button:hover { background-color: #45a049; }
    .desc { font-size: 12px; color: #666; margin-top: 8px; }
  </style>
</head>
<body>
  <button id="btnWidth">100% 宽度全屏</button>
  <button id="btnHeight">100% 高度全屏</button>
  <div class="desc">仅适用于舰队收藏</div>
  <script src="popup.js"></script>
</body>
</html>

3. popup.js (核心逻辑)

popup.js

// ==========================================
// 1. 定义 CSS 样式常量
// ==========================================

const BASE_CSS = `
    #sectionWrap { display: none !important; }
    html, body {
      overflow: hidden !important;
      background-color: #000 !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }
    #flashWrap, #htmlWrap, #game_frame {
      width: 100vw !important;
      height: 100vh !important;
    }
    canvas {
      position: fixed !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      z-index: 2147483647 !important;
      margin: 0 !important;
    }
`;

const CSS_WIDTH_MODE = BASE_CSS + `
    canvas { width: 100vw !important; height: auto !important; }
`;

const CSS_HEIGHT_MODE = BASE_CSS + `
    canvas { width: auto !important; height: 100vh !important; }
`;

// ==========================================
// 2. 核心逻辑函数
// ==========================================

async function handleFullscreen(mode) {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const target = { tabId: tab.id, allFrames: true };

  const statusResults = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => ({
      isFullscreen: !!document.fullscreenElement,
      currentMode: document.body.getAttribute('data-fs-mode')
    })
  });
  
  const { isFullscreen, currentMode } = statusResults[0].result;

  // 清理旧CSS
  try { await chrome.scripting.removeCSS({ target, css: CSS_WIDTH_MODE }); } catch (e) {}
  try { await chrome.scripting.removeCSS({ target, css: CSS_HEIGHT_MODE }); } catch (e) {}

  if (isFullscreen && currentMode === mode) {
    // 退出逻辑
    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: () => {
        document.body.removeAttribute('data-fs-mode');
        if (document.exitFullscreen) document.exitFullscreen().catch(console.log);
      }
    });
  } else {
    // 进入逻辑
    const cssToInsert = (mode === 'width') ? CSS_WIDTH_MODE : CSS_HEIGHT_MODE;
    await chrome.scripting.insertCSS({ target, css: cssToInsert });

    await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      args: [mode],
      function: (newMode) => {
        document.body.setAttribute('data-fs-mode', newMode);
        const iframe = document.getElementById('game_frame');
        const el = iframe || document.documentElement;
        el.setAttribute('allow', 'fullscreen');
        if (!document.fullscreenElement) {
          el.requestFullscreen().catch(() => document.documentElement.requestFullscreen());
        }
      }
    });
  }
}

// 绑定按钮事件
document.getElementById('btnWidth').addEventListener('click', () => handleFullscreen('width'));
document.getElementById('btnHeight').addEventListener('click', () => handleFullscreen('height'));

STEP 2：加载到浏览器

支持 Chrome, Edge, Brave 等所有 Chromium 内核浏览器。

在浏览器地址栏输入 chrome://extensions 并回车访问。
打开页面右上角的 “开发者模式” (Developer mode) 开关。
点击左上角出现的 “加载已解压的扩展程序” (Load unpacked) 按钮。
选择包含上述三个文件的 KC_Fullscreen 文件夹。
安装成功！登录 DMM 游戏页面，点击浏览器右上角的拼图图标找到本插件使用。