Javascript代码适用于控制台但不能扩展[重复]答案

【问题标题】：Javascript code Works in console but not extension [duplicate]Javascript代码适用于控制台但不能扩展[重复]
【发布时间】：2021-12-31 07:30:36
【问题描述】：

我有一个简单的播放速度设置器，适用于任何带有 HTML 标记的视频 (YouTube)。

当我单击 2.25 按钮尝试将视频播放速度设置为 2.25 时出现此错误：“无法设置 null 属性（设置 'playbackRate'）”。

但是当我打开浏览器控制台并输入“document.querySelector('video').playbackRate = 2.25”时，视频的速度会变好。

为什么运行相同代码的扩展程序没有执行失败？解决方法是什么？

我所有的代码都在下面。您可以复制它并自己测试。

playspeed.js

document.getElementById('speed225').onclick = function () {
    document.querySelector('video').playbackRate = 2.25;
}

speed-buttons.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div id="popup-content">
        <div class="button" id="speed225">2.25</div>
    </div>
    <script src='playspeed.js'></script>
</body>

</html>

style.css

html, body {
    width: 100px;
}

.button {
    margin: 3% auto;
    padding: 4px;
    text-align: center;
    font-size: 1em;
    cursor: pointer;
    background-color: lightgray;
}

.button:hover {
    background-color: rgb(196, 230, 196);
}

manifest.json

{
    "manifest_version": 2,
    "name": "Video Playback Speed Controller (Menu Bar)",
    "version": "1.0",
    "description": "Adds buttons in the menu bar to change playback speed for HTML video tagged videos.",
    "icons": {
        "48": "icons/playback-icon-48.png"
    },
    "permissions": [
        "activeTab"
    ],
    "browser_action": {
        "default_icon": "icons/playback-icon-32.png",
        "default_title": "Change Video Speed",
        "default_popup": "speed-buttons.html"
    }
}

【问题讨论】：

标签： javascript html dom google-chrome-extension firefox-addon

【解决方案1】：

您的 JavaScript 文件 playspeed.js 未在内容窗口中执行。它在您的弹出式 HTML 中运行。

我建议您升级到清单 V3 并使用 chrome.scripting。然后，尝试这样的事情：

const tabId = getTabId();
chrome.scripting.executeScript(
    {
      target: {tabId: tabId},
      files: ['playspeed.js'],
    },
    () => { ... }
);

另请参阅：https://developer.chrome.com/docs/extensions/reference/scripting/

【讨论】：

有没有办法让代码在 FireFox 中工作？
@JamesGrey v2 清单也支持executeScript，只是不同。