Extension for Chrome browser

I am new to creating Chrome extensions and I am attempting to build one that will display the IDs of all elements with a specific class name on a website in the popup window. I would like to know if there is a better way to tackle this issue. Thank you for your assistance, and I apologize for my limited English proficiency.

manifest.json

{
  "name": "Test",
  "version": "1.0",
  "manifest_version" : 2,
  "description": "", 

  "browser_action": {
    "default_icon": "images/icon.png",
    "default_popup": "popup.html"
  },  
  "permissions": [ "tabs","http://*/*" ]  
}

popup.html

<!doctype html>
<html>
  <head>
    <style>
        body{
          height: 150px;
          width: 800px;
          overflow: hidden;
          margin: 0px;
          padding: 0px;
          background: white;
        }
    </style>
    <script src="scripts/popup.js"></script>
  </head>
  <body>    
  </body>
</html>

popup.js

  //  Inserting javascript code
  chrome.tabs.executeScript(null, {file: "scripts/content.js"});  

  // Sending request
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    document.write(response.farewell);
    });
  }); 

content.js

// This function gets all the id of the elements that have a class name X and 
// returns them in a string separated by ",".
function getId(className) {
   // I get all elements containing className
   var elements = document.getElementsByClassName(className);   

   // Creating array with id of the elements
   var idElements= new Array();
   for (var i = 0; i < elements.length; i++) {
    idElements[i]=elements[i].id;
   }

   // Concatenate all id
   var list = idElements.join(" , ");
   return list;
}

var result=getId("classNameTest");

// Listening for message from popup.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.greeting == "hello")
      sendResponse({farewell: result});
  });

Any feedback is welcomed, thank you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

NextJS middleware API receives an uploaded image file form, but the request is undefined

Currently, I'm utilizing NextJS to handle form data processing and database uploads, with a pit stop at the NextJS API middleware for image editing. pages/uploadImage.tsx This is the client-side code handler. ... async function handleImageUpload(imag ...

React - Issue with state not being updated accurately

My current project involves using the <Select> component from Material-ui to create a drop-down menu. I need to update the state of the <Select> component after a selection has been made. To achieve this, I have set the value property of the & ...

"Clicking on the hamburger menu causes the webpage to reset its scroll

I recently integrated a mobile hamburger menu into my website, which is primarily built around a single page. However, I noticed that whenever I open the menu, it automatically scrolls to the top of the page regardless of where you were previously scrollin ...

Is there a way to align a button in the center of the browser's footer?

Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...

execute a synchronous function within a promise

Recently diving into the world of JavaScript and asynchronous operations, I found myself working on a Node.js router with Express that pulls weather data from MongoDB using Mongoose. This data is collected from various sites at 15-minute intervals and proc ...

Add characters to div using JavaScript

I am curious about which framework, if any, would be most effective for capturing keystrokes and adding them to an HTML element such as a "p" element. My goal is to allow the client to type something on the keyboard and have it immediately displayed in the ...

Formatting decimals with dots in Angular using the decimal pipe

When using the Angular(4) decimal pipe, I noticed that dots are shown with numbers that have more than 4 digits. However, when the number has exactly 4 digits, the dot is not displayed. For example: <td>USD {{amount| number: '1.2-2'}} < ...

Vuetify's autofocus feature is limited to functioning only when the modal is first opened

When attempting to utilize Vuetify's v-text-field with the autofocus attribute, I am facing an issue where it only works the first time. Once I close the dialog, the autofocus functionality no longer works. This is the code snippet I am trying to imp ...

Using Redux Form to set the default checked radio button in a form setting

I'm currently attempting to make a radio button default checked by using the code below: import { Field } from "redux-form"; <Field name={radio_name} component={renderField} type="radio" checked={true} value={val1} label="val1"/> <Field na ...

What is the process for connecting controls to Canvas sprites?

Any input is EXTREMELY helpful! To put it shortly, I'm in need of assistance with utilizing HTML5/CSS3 buttons to manage sprite animations on my canvas. These buttons are responsible for controlling the direction and speed of the sprites independentl ...

Issue with pagination and filtering in Smart-table.js

Presently, my focus is on developing functionality for Smart-table.js, which requires the following features: Retrieve JSON data from a web service Create a table with pagination and filtering capabilities Implement filters for individual columns or globa ...

Troubleshooting why content set to a <div> element with JavaScript / jQuery is not persisting after a

This is the current code snippet I am working with: <asp:Button ID="btnSave" runat="server" OnClick="Save" CssClass="StylizedButton" resourcekey="btnSave" /> <div id="lbltot"></div> Below is the JavaScript portion of the code: $(do ...

Incorporate new markers into Google maps without the need to constantly initialize the map

My current goal is to have the user input a latitude and longitude into a text box, and then display a marker on the map for that location without needing to reinitialize the map each time. To start, I have set up my map like this: <script type="text/ ...

You cannot click on a React subcomponent

I am currently working on implementing a "Title" component within a header. The idea is that when you click on the title component, a header will appear with various buttons for formatting options such as bold and underline. This concept was inspired by a ...

The combination of Heroku (Cedar) with Node, Express, and Jade is causing issues with the client-side javascript files in a subdirectory. While they work fine locally with foreman and

As a newcomer to node and Heroku, I am facing what seems like a simple permission issue. Despite my efforts, I am unable to pinpoint the exact source of the problem. In a sub-directory located one level beneath my root directory where the web.js file is s ...

Despite providing the correct token with Bearer, Vue 3 is still experiencing authorization issues

I am working on a project that involves Vue 3 with a Node Express back-end server and Firebase integration. On the backend server, I have implemented the following middleware: const getAuthToken = (req, _, next) => { if ( req.headers.authori ...

The chosenValues.filter method hit an unexpected token; a comma was anticipated

I have encountered a syntax error in the following line: queryComponents: prevState.seletedValues.filter((a, i) => (i !== index)); I am attempting to swap out splice with filter. I've attempted modifying brackets, both adding and removing them, b ...

Deliver Compressed Files following Angular CLI --Prod Configuration

After using the Angular CLI's command to minify my basic Angular app, a dist folder was generated with the project folder and minified files. However, when I run ng serve, it always serves the unminified development files, whether it's in the roo ...

Strange issue with Firefox when utilizing disabled attribute as "disabled"

I found a curious bug in Firefox: Check out (unfortunately not reproducible in jsfiddle) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> < ...

Difficulty rendering wireframe with Three.js MeshBasicMaterial

I am experiencing an issue with my geometry created using the three.js API. When I export an obj file from Blender and import it, the object renders faces instead of wireframe as desired. Could this problem be due to a mistake in my import or export proces ...