Hello, I'm creating a chrome extension application for a term long project I've gotten code to work as a regular HTML page, but I'm struggling to get it to work as a Chrome Extension Can someone help Right now it's not adding the list underneath the text input box Thank you manifest json name Task Popup Test , description Allows user to enter in tasks to a list , version 1 0 , manifest version 2, permissions alarms , notifications , storage , background scripts background js , persistent false , browser action default icon to do png , default title Tasks To Do , default popup popup html popup html body margin 0 min width 250px Include the padding and border in an element's total width and height box sizing border box Remove margins and padding from the list ul margin 0 padding 0 Style the list items ul li cursor pointer position relative padding 12px 8px 12px 40px list style type none background eee font size 18px transition 0 2s make the list items unselectable webkit user select none moz user select none ms user select none user select none Set all odd list items to a different color (zebra stripes) ul li nth child(odd) background f9f9f9 Darker background color on hover ul li hover background ddd When clicked on, add a background color and strike out text ul li checked background 888 color fff text decoration line through Add a checked mark when clicked on ul li checked before content '' position absolute border color fff border style solid border width 0 2px 2px 0 top 10px left 16px transform rotate(45deg) height 15px width 7px Style the close button close position absolute right 0 top 0 padding 12px 16px 12px 16px close hover background color f44336 color white Style the header header background color f44336 padding 30px 40px color white text align center Clear floats after the header header after content display table clear both Style the input input border none width 75 padding 10px float left font size 16px Style the Add button addBtn padding 10px width 25 background d9d9d9 color 555 float left text align center font size 16px cursor pointer transition 0 3s addBtn hover background color bbb To Do List Add popup js 'use strict' Create a close button and append it to each list item var myNodelist document getElementsByTagName( LI ) var i for (i 0 i myNodelist length i ) var span document createElement( SPAN ) var txt document createTextNode( u00D7 ) span className close span appendChild(txt) myNodelist i appendChild(span) Click on a close button to hide the current list item var close document getElementsByClassName( close ) var i for (i 0 i close length i ) close i onclick function() var div this parentElement div style display none Add a checked symbol when clicking on a list item var list document querySelector('ul') list addEventListener('click', function(ev) if (ev target tagName 'LI') ev target classList toggle('checked') , false) Create a new list item when clicking on the Add button function newElement() var li document createElement( li ) var inputValue document getElementById( myInput ) value var t document createTextNode(inputValue) li appendChild(t) if (inputValue '') alert( You must write something ) else document getElementById( myUL ) appendChild(li) document getElementById( myInput ) value var span document createElement( SPAN ) var txt document createTextNode( u00D7 ) span className close span appendChild(txt) li appendChild(span) for (i 0 i close length i ) close i onclick function() var div this parentElement div style display none

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 22, 2024

Hello, I'm creating a chrome extension application for a term long project. I've gotten code to work as a regular HTML page, but I'm struggling

Hello, I'm creating a chrome extension application for a term long project. I've gotten code to work as a regular HTML page, but I'm struggling to get it to work as a Chrome Extension. Can someone help? Right now it's not adding the list underneath the text input box. Thank you! ---manifest.json--- { "name": "Task Popup Test", "description": "Allows user to enter in tasks to a list", "version": "1.0", "manifest_version": 2, "permissions": ["alarms", "notifications", "storage"], "background": { "scripts": ["background.js"], "persistent": false }, "browser_action": { "default_icon": "to-do.png", "default_title": "Tasks To Do", "default_popup": "popup.html" } }

--------------

---popup.html---