Question

在SO和其他地方有大量关于此的信息，但我无法让它发挥作用！

我有这个popup.html：

div

我的manifest.json：

div

background.js：

<html>
  <head>
    <title>My popup that should display the DOM</title>
    <script src="popup.js"></script>
  </head>
  <body>
        <button id="btn">Click!</button>
        <input type="text" id="info"> 
  </body>
</html>

content.js：

{
"manifest_version": 2,
"name":    "Get HTML example w/ popup",
"version": "0.0",

"background": {
    "persistent": false,
    "scripts": ["background.js"]
},
"content_scripts": [{
    "matches": [ "http://*/*", "https://*/*" ],
    "js":      ["jquery-2.2.1.min.js","content.js"]
}],
"browser_action": {
    "default_icon": "icon.png",
    "default_title": "Get HTML example",
    "default_popup": "popup.html"
},
"permissions": ["tabs"]
}

是否有一个简单的示例，您可以在其中单击弹出窗口中的按钮并从DOM获取内容并在弹出窗口中显示它？

Answer 1

以下是基于您的代码的示例代码：

popup.js

function hello() {
   var  name = document.getElementById('info').value;
   alert("Hello " +name);
}

document.getElementById('btn').addEventListener('click', hello);

popup.html

<html>
  <head>
    <title>My popup that should display the DOM</title>

  </head>
  <body>
        <button id="btn">Click!</button>
        <input type="text" id="info"> 
        <script type="text/javascript" src="popup.js"></script>
  </body>
</html>

的manifest.json

{
"manifest_version": 2,
"name":    "Get HTML example w/ popup",
"version": "0.0",
"background": {
    "persistent": false,
    "scripts": ["background.js"]
},
"browser_action": {
    "default_icon": "icon.png",
    "default_title": "Get HTML example",
    "default_popup": "popup.html"
},
"permissions": ["tabs", "<all_urls>"]
}

background.js：留空（由于我是Chrome开发的新手，因此对此不确定）但是它正在发挥作用。

我从这个SO question得到了答案，如果您直接使用内联标题，则会遇到以下错误消息：

拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：＆＃34; script-src＆＃39; self＆＃39;铬扩展资源：＆＃34;

Chrome扩展程序获取DOM文本，并在点击按钮的popup.html中显示

1 个答案: