创建视频变速器-解网

问：

我正在为 BINGE 创建一个视频变速器，它使用

document.querySelector("video").playbackRate = SOME_SPEED_UP_TO_16;

更改速度，尽管我正在将其转换为扩展程序，但我不确定如何对 javascript 文件进行排序，但效果很好

清单文件

{
      "manifest_version": 3,
            
      "name": "Binge Video Speeder",
      "version": "0.1.0",
      "description": "Changes the speed of Binge movies and shows",
       
      "content_scripts": [{
            "css": ["style.css"],
            "js": ["code.js"],
            "matches": ["https://binge.com.au/shows/*", "https://binge.com.au/movies/*"]
      }],

      "action": {
            "default_popup": "index.html",
            "default_title": "Binge Video Speeder"
      },

      "permissions": [
            "storage"
      ]

}

弹出

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- <script src="content.js"></script> -->
      <title>Document</title>
</head>
<body>
      <input type="text" id="speed_input" placeholder="Enter Speed">
      <button id="set_button">Set</button>
</body>
</html>

JAVASCRIPT（我希望这在弹出窗口中发生）

window.onload = function() {
      document.getElementById("set_button").addEventListener("click", set_speed);
}

function set_speed() {
      localStorage["speed"] = parseFloat(document.getElementById("speed_input").value);
      alert(localStorage["speed"])
};

JAVASCRIPT（我希望在狂欢选项卡打开时发生这种情况）

window.onload = function() {
      document.querySelector("video").playbackRate = localStorage["speed"];
};

javascript html google-chrome-extension local-storage 清单

清单 JSON

{
  "manifest_version": 3,
  "name": "Binge Video Speeder",
  "version": "0.1.0",
  "description": "Changes the speed of Binge movies and shows",
  "content_scripts": [
    {
      "css": ["style.css"],
      "js": ["content.js"],
      "matches": ["https://binge.com.au/shows/*", "https://binge.com.au/movies/*"]
    }
  ],
  "action": {
    "default_popup": "index.html",
    "default_title": "Binge Video Speeder"
  },
  "permissions": ["storage", "activeTab"]
}

弹出 HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Binge Video Speeder</title>
</head>
<body>
  <input type="text" id="speed_input" placeholder="Enter Speed">
  <button id="set_button">Set</button>
  <script src="popup.js"></script>
</body>
</html>

弹出式 JavaScript

document.getElementById("set_button").addEventListener("click", set_speed);

function set_speed() {
  const speed = parseFloat(document.getElementById("speed_input").value);
  if (!isNaN(speed)) {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, { action: "set_speed", speed: speed });
    });
  } else {
    alert("Please enter a valid speed.");
  }
}

内容脚本 JavaScript

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "set_speed") {
    document.querySelector("video").playbackRate = request.speed;
  }
});

如果不起作用，请回复。

“未捕获（承诺）错误：无法建立连接。“接收端不存在”通常发生在邮件系统出现问题时。确保在需要时注入内容脚本。确保您的内容脚本（content.js）已注入到“狂欢”选项卡中。在清单文件中，您已指定内容脚本的匹配项，但请确保成功加载内容脚本。

0赞 조영현 11/16/2023

在没有视频元素的情况下处理这种情况。如果内容脚本在页面上存在视频元素之前尝试访问该元素，则可能会发生此错误。在尝试更改其播放速率之前，应检查视频元素是否存在。

上一个：如何使用 chrome.scripting API 在当前选项卡上执行脚本？[复制]

下一个：使用 PWA 为 Chrome 商店创建 Chrome 应用

创建视频变速器

Creating a Video Speed Changer

评论

清单 JSON

弹出 HTML

弹出式 JavaScript

内容脚本 JavaScript

评论