YouTube Shorts Block 项目教程

齐妤茜

于 2024-08-30 09:09:35 发布

阅读量303

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00153/article/details/141704049

版权

YouTube Shorts Block 项目教程

Youtube-shorts-blockPlay the Youtube shorts video as if it were a normal video项目地址:https://gitcode.com/gh_mirrors/yo/Youtube-shorts-block

1. 项目的目录结构及介绍

Youtube-shorts-block/
├── README.md
├── manifest.json
├── background.js
├── content.js
├── options.html
├── options.js
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

README.md: 项目说明文档，包含项目的基本信息和使用指南。
manifest.json: 扩展的配置文件，定义了扩展的基本信息、权限和脚本入口。
background.js: 后台脚本，处理扩展的主要逻辑。
content.js: 内容脚本，注入到 YouTube 页面中，用于处理 Shorts 视频的显示逻辑。
options.html: 选项页面，允许用户配置扩展的设置。
options.js: 选项页面的脚本，处理用户输入和配置保存。
icons/: 扩展图标文件夹，包含不同尺寸的图标。

2. 项目的启动文件介绍

manifest.json: 这是 Chrome 扩展的入口文件，定义了扩展的基本信息、权限和启动脚本。

{
  "manifest_version": 2,
  "name": "YouTube Shorts Block",
  "version": "1.0",
  "description": "Block YouTube Shorts videos.",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/*"],
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    },
    "default_title": "YouTube Shorts Block"
  },
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  }
}

3. 项目的配置文件介绍

options.html: 选项页面，允许用户配置扩展的设置。

<!DOCTYPE html>
<html>
<head>
  <title>YouTube Shorts Block Options</title>
</head>
<body>
  <h1>YouTube Shorts Block Options</h1>
  <label>
    <input type="checkbox" id="hideShorts"> Hide Shorts Videos
  </label>
  <button id="save">Save</button>
  <script src="options.js"></script>
</body>
</html>

options.js: 选项页面的脚本，处理用户输入和配置保存。

document.getElementById('save').addEventListener('click', function() {
  const hideShorts = document.getElementById('hideShorts').checked;
  chrome.storage.sync.set({ hideShorts: hideShorts }, function() {
    alert('Settings saved.');
  });
});

chrome.storage.sync.get(['hideShorts'], function(result) {
  document.getElementById('hideShorts').checked = result.hideShorts || false;
});

通过以上文档，您可以了解并配置 YouTube Shorts Block 扩展项目。

Youtube-shorts-blockPlay the Youtube shorts video as if it were a normal video项目地址:https://gitcode.com/gh_mirrors/yo/Youtube-shorts-block