1

HTMLタグ付きのビデオ（YouTube）の簡単な再生速度設定器があります。

速度を 2.25 に変更するはずの 2.25 ボタンをクリックしても、何も起こりません。エラーメッセージが表示されません。

しかし、ブラウザ コンソールを開いて「document.querySelector('video').playbackRate = 2.25」と入力すると、ビデオの速度が正常に変化します。

なにが問題ですか？

playspeed.js

browser.tabs.executeScript(
{ code: `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>

スタイル.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);
}

マニフェスト.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"
    }
}
4

1 に答える 1

0

speed225ボタンはポップアップ内にあるため、そのリスナーを executeScript 内に配置することはできません。これにより、Web ページ内にコードがコンテンツ スクリプトとして挿入されます。

これを使って：

document.getElementById('speed225').onclick = function () {
  browser.tabs.executeScript({
    code: "document.querySelector('video').playbackRate = 2.25;"
  });
};

拡張スクリプトからの出力を表示するために正しい devtools コンソールを開く方法も参照してください。

于 2022-01-01T07:49:37.330 に答える