Chrome扩展-按钮在弹出.html

Chrome Extensions - Button in popup.html

本文关键字：html 按钮 扩展 Chrome      更新时间：2023-09-26

首先，我不是专业程序员，只是玩玩而已。我试着写一个小Chrome扩展来管理其他扩展。但我已经未能创建一个按钮，我可以点击上发生的事情。我的主要问题是，当试图获得elementbyid时，它返回NULL，并且使用addEventListener失败。也许是我太傻了，看不出问题所在。我添加了DOMContentLoaded，因为有人写有一个问题与内容的加载。

谢谢你的帮助。

popup.js 

  var  bgp = chrome.extension.getBackgroundPage()
  var arr = []; // the array
  
  document.addEventListener('DOMContentLoaded', function () {
    
    var tbinput = document.getElementById("tbinput");
    var btadd = document.getElementById("btadd");
    btadd.addEventListener('click', addItems());
  };
  
  function addItems(){
        arr.push(input.value); // add textbox value to array
        input.value = ''; // clear textbox value
  };

popup.html 

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 'browser_action' field in manifest.json contains the 'default_popup' key with
 value 'popup.html'.
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
     </style>
    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
    <script src='popup.js'></script>
  </head>
  <body>
    <input type='text' id='tbinput'>
    <br>
    <input type='button' id='btadd' value='Add'>
    <br>
    <input type='button' id='view'  value='View all Contents'>  
    <br>
    <input type='text' id='output'>
  </body>
</html>

manifest.json 

{
  "name": "Extensions Manager",
  "description": "Random",
  "version": "2.0",
  "permissions": [
   "management"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Extensions Manager",
    "default_popup":"popup.html"
  },
  "manifest_version": 2
}

您正在触发addItems函数，而不是将其传递给addEventListener方法。

btadd.addEventListener('click', addItems()); // addItems() should be addItems

另一个问题是你的DOMContentLoaded监听器，它没有正确关闭:

}; // This should be });


var arr = []; // the array
var tbinput;
document.addEventListener('DOMContentLoaded', function() {
  tbinput = document.getElementById("tbinput");
  document.getElementById("btadd").addEventListener('click', addItems);
});
function addItems() {
  arr.push(tbinput.value); // add textbox value to array
  tbinput.value = ''; // clear textbox value
};
<input type='text' id='tbinput'>
<br>
<input type='button' id='btadd' value='Add'>
<br>
<input type='button' id='view' value='View all Contents'>
<br>
<input type='text' id='output'>

相关文章：