主页 / 问题 / 772830
Accepted
Tick-Tack
Asked:2020-01-19 17:43:50 +0000 UTC2020-01-19 17:43:50 +0000 UTC

扩展中的用户脚本，将脚本嵌入到网站页面代码中

  • 772

我正在编写扩展程序并且遇到了问题，我需要通过单击键盘键来调用窗口，用户可以在其中输入内容并将其发送给我。我决定完成它，userscript但由于某种原因它不起作用。这是一个例子：

manifest.json

{
  "manifest_version": 2,
  "content_scripts": [{
    "exclude_globs": [],
    "include_globs": ["*"],
    "js": ["jquery.js", "user.js"],
    "matches": ["http://*/*",
      "https://*/*"
    ],
    "run_at": "document_end"
  }],
  "converted_from_user_script": true,
  "description": "Back top userscript extension for google chrome",
  "name": "backTopUserJS",
  "version": "1"
}

user.js

document.addEventListener('DOMContentLoaded', function() {

  const div = document.createElement('div');
  const root = div.innerHTML = '<h1 id="modal_form" style="display:none; border: 2px solid red;">Modal</h1>';
  document.body.appendChild(div);

  window.addEventListener('keydown', e => {
    if (e.keyCode === 76) { //l
      root.querySelector('#modal_form').style.display = "block";
    }
  });
});

告诉我为什么当我点击按钮时没有任何反应。清单还包含一个文件content.js和一个带有css.

javascript

1 个回答

  1. Best Answer

    这个例子有很多问题

    1."run_at": "document_end"与 .一起 使用没有意义document.addEventListener('DOMContentLoaded', ...)。

    document_end 本身的要点是在 DOMContentLoaded 事件触发后尝试运行内容脚本代码。

    解决清单中的变化"run_at": "document_start"

    2.这个表达有错误的意思：

    const root = div.innerHTML = '<h1 id="modal_form" style="display:none; border: 2px solid red;">Modal</h1>';

    作为执行的结果，root它将是一个字符串（注意有两个赋值运算符）。

    因此，内容脚本的正确代码应如下所示：

    document.addEventListener('DOMContentLoaded', function() {
    const div = document.createElement('div');
    div.innerHTML = '<h1 id="modal_form" style="display:none; border: 2px solid red; position: absolute; z-index: 99999; top: 0">Modal</h1>';
    document.body.appendChild(div);

    window.addEventListener('keydown', e => {
        if (e.keyCode === 76) { //l
          div.querySelector('#modal_form').style.display = "block";
        }
    });
});

    我为模态添加了一些样式以使其更加可见。该块将出现在网站的左上角。

    • 1

相关问题