Autofill dropdown form with a chrome extension using javascript

Question

I Have a small button in HTML as a chrome extension that calls a javascript script to autofill a dropdown form . but I don't really know what am I doing wrong . nothing happens when I click on the button created .

manifest file:

{
  "manifest_version": 2,
  "name": "Dropdown Filler",
  "version": "1.0",
  "description": "A simple Chrome extension to fill out dropdown forms",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_icon": "icon16.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "contextMenus",
    "storage"
  ]
}

html button

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown Filler</title>
  <script src="popup.js"></script>
</head>
<body>
  <button id="fillDropdown">Fill Dropdown</button>
</body>
</html>

this is the javascript script called Popup.js

const  selectElement = document.getElementById("incident.incident_state");
const options = selectElement.options;
for (let i = 0; i < options.length; i++) {
  if  (options[i].textContent === 6) {
     selectElement.value  = options[i].value;
     console.log("works");
break;
}
}

and this is the web element , the dropdown that I want to modify

<select aria-required="false" aria-labelledby="label.incident.incident_state" ng-non-bindable="true" name="incident.incident_state" id="incident.incident_state" onchange="onChange('incident.incident_state', arguments.length === 2 ? arguments[1] : false);" style="; " class="form-control  " choice="3"><option value="2" selected="SELECTED">In Progress</option><option value="4">On-Hold</option><option value="-1">Pending Assignment</option><option value="6">Resolved</option></select>

Autofill dropdown form with a chrome extension using javascript

0 Answers0