如何将信息传递到Firefox插件中的内容脚本?

时间:2018-12-07 20:13:05

标签: javascript firefox-addon

我想创建一个Firefox临时加载项,并在导航栏中弹出一个窗口,以更改在浏览器中播放视频的速度。 (基于本教程https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension

我创建了弹出图标和脚本来选择速度值(index.html,script.js)。然后另一个app.js文件根据所选值更改视频速度:

manifest.json

{

  "manifest_version": 2,
  "name": "Netflix_speed",
  "version": "1.0",

  "description": "Adds an extension button to change the speed of a video played on Netflix.",
  "icons": {
    "64": "icons/icon-64.png"
  },
    "permissions": [
    "activeTab"
  ],

  "content_scripts": [{
    "matches": [ "*://*.netflix.com/*" ],
    "js":  [ "content_scripts/app.js" ]
  }],

  "browser_action": {
    "browser_style": true,
    "default_icon": "icons/icon-64.png",
    "default_title": "Netflix_speed",
    "default_popup": "popup/index.html"
  }
}

index.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css"/>
  </head>
<body>
  <div id="popup-content">
    <div class="number" id="0.75">0.75</div>
    <div class="number" id="1">1</div>
    <div class="number" id="1.25">1.25</div>
  </div>
  <script src="script.js" type="module"></script>
</body>

</html>

script.js

const listenForClicks = () => {
    document.addEventListener("click", (e) => {
        // console.log('log: ', e.target.textContent);
        // console.log(e);
        switch (e.target.textContent) {
            case '0.75':
                console.log(0.75);
                return 0.75;
                break;
            case '1':
                console.log(1);
                return 1;
                break;
            case '1.25':
                console.log(1.25);
                return 1.25;
                break;
            default:
                console.log("default");
                return 1;
        }
    }
)};

listenForClicks();

export default listenForClicks

app.js

import listenForClicks from popup/script.js

let speed = listenForClicks();

console.log(speed);
console.log('app.js')
const vidSpeed = () => {
    document.querySelectorAll('video').forEach(v=>v.playbackRate=speed);
}

当我在浏览器中运行index.html时,它将返回我想要的值。但是,如果我通过附加组件运行它,则不会有返回或错误。 我想我在弹出文件和内容脚本之间的导入/导出有问题,但是我无法确定它是什么。

0 个答案:

没有答案