Creating a sticky popup feature for your Chrome extension

Just starting out with chrome extensions and looking to create one that appends an external class to a selected tag.

For example, let's say we have the following tag:

<h1>extension</h1>

When the user clicks on this element, I want to add an external class to it in the DOM. The tag should not be empty.

To achieve this, I am working on a chrome extension. I need to have a fixed popup or canvas similar to using CSS Selectors.

I want my popup.html to remain open only when I click on the close button, not when I interact with elements on the page. Currently, I am facing issues as the popup closes every time I click on the webpage.

This is the code from my manifest file:

{
   "manifest_version": 2,
   "name":"Spider_Extension",
   "version":"1.0",
   "permissions": [
       "tabs"
     ],
   "content_scripts":[{
       "matches":[
           "<all_urls>"
       ],
       "js":["Content.js"]
   }],
   "background": {
       "scripts": ["background.js"]        
    },
   "browser_action":{
       "default_icon":"get_started16.png"
    }
}

This is the content of my background.js file:


function button_clicked(tab){
   let msg={
      txt:"hello"
   }
   console.log(tab)
   chrome.tabs.sendMessage(tab.id,msg);
}

Here is the code from my popup.html file:

<html>
​
<head>
   <title>Spider extension</title>
   <link rel="stylesheet" href="styles.css">
</head>
​
<body>
​
   <label for="cars">Select Level:</label>
   <select id="levels">
       <option value="l1">L1</option>
       <option value="l2">L2</option>
       <option value="l3">L3</option>
       <option value="l4">L4</option>
   </select>
   <br>
   <button id="addLevel" style="margin:5px;">Add level</button>
   <br>
   <button id="break" style="margin:5px;">Break</button>
   <br>
   <button id="deselect" style="margin:5px;">Deselect</button>
   <br>
   <button id="nd__close">X</button>
​
   <script src="popup.js"></script>
</body>
​
</html>

If anyone has any insights or solutions on how to tackle this issue, I would greatly appreciate it!

Thank you in advance

Answer №1

In my opinion, utilizing popups in this way goes against their intended use and may not be achievable with the standard popup structure. An alternative approach would involve injecting your popup content directly onto the page, although this method is often considered less aesthetically pleasing (despite its prevalence in popular extensions). A more effective solution would be to implement context menus instead. You can learn more about them here: https://developer.chrome.com/apps/contextMenus Context menus allow users to right-click on specific elements to access desired actions, similar to how ublock origin operates: https://i.sstatic.net/WAI4Y.png

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

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-compon ...

Tips for improving the readability of HTML within a JavaScript file

This is the HTML I have been given <div data-role="collapsible"> <div class="prd-items-detials"> <ul> <li class="head"> <form> <label class="testtt" for="checkbo ...

Node.js encountering req.body as undefined when using form-data as the content-type

After creating a small demonstration for this form-data passing API, I attempted to test it using Postman. However, I encountered an issue where no data was being retrieved. Code const http = require("http"); const express = require("expres ...

Is it possible to add a tooltip to a div without using any JavaScript or JQuery?

I've been working on designing a form that includes tooltips displayed constantly on the right side to assist users in completing their forms. To achieve this, I have separated each part into Divs and added a tooltip for each one. <div title="This ...

Preventing the mysql server called by php from running when the website is refreshed

My local website runs by querying a mysql database using inputs from an html form. The form values are passed to php via jQuery to execute the query. Is there a way to send a command to the mysql server to terminate the query if the web page is refreshed? ...

The jquery selector fails to retrieve all elements

On the upcoming web page, I am attempting to use Jquery to select all <li> elements. Specifically, I want to target all the products contained within <ul class=search-result-gridview-items">. You can find the products here: I have made attempt ...

Displaying results of data from a cross domain request

I have some test code related to WordPress displayed below. jQuery(document).ready(function($) { var link = 'http://000.00.00.00/cgi-bin/test.cgi'; $("#sub").click(function() { $.ajax({ type:'POST', url: link, ...

Ordering ng-repeat in AngularJS using a separate arrayDiscover how to easily order your

Imagine I have an array containing keys in a specific order orderedItems=["apple","banana","orange]; and there is a JSON object that I want to display using ng-repeat but following the sequence specified in the array: {"fruits": { "apple":{ ...

Hiding the y-axis on a msstackedcolumn2dlinedy Fusion Chart: A step-by-step guide

Currently, I am utilizing the msstackedcolumn2dlinedy fusion charts. To see an example of this in action, please take a look at this fiddle: Fiddle The objective I have is to hide the y-axis value on the right side of this chart. Can anyone provide guida ...

When including external links, the domain is always placed at the beginning of the link, even if the link

Issue: Hyperlinks are displaying our domain name before the actual link. The text stored in our database is as follows: To learn more about Rich Habits <a href=”http://www.externaldomain.com”>click here.</a> When we echo this text in our ...

Update to react version 18.2.0, router-dom v6, and mui 5 for improved performance

Struggling to convert the following file or code into React's latest version and react-router-dom v6. I attempted it myself but encountered errors related to createBrowserHistory that I couldn't comprehend. My routes are stored in a JSON file and ...

Code functioning properly on JS Fiddle, experiencing difficulties when running directly in browser

Hey there, I have this vertical jquery tabs example working on JSFiddle, you can check it out here: https://jsfiddle.net/tj_vantoll/nn2Qw/ I've been trying to replicate it in an HTML file but so far I haven't had any luck... Can someone help me ...

Delicate seams break up the different sections of the webpage

I'm facing an issue with my website where thin lines are appearing between each section when previewed in Safari and Chrome, but not in Firefox (as shown in the images). I've checked the CSS code for each section in Dreamweaver, where the lines d ...

The function is limited to a single use

Whenever I click on the blue color, my function works just fine. However, once I try to change it back to black, it stops working altogether. What could be causing this issue? Is there a simpler way to achieve the desired functionality? I have confidence ...

Determining the clicked node in a JavaScript environment

There are multiple spans with labels. <span class="viewEdit">View and edit class one.</span> <span class="viewEdit">View and edit class two.</span> <span class="viewEdit">View and edit class three.</span> <span clas ...

When implementing dynatable with Meteor, the outcomes may vary between the demonstration in a fiddle and the actual application

Here is the fiddle I created for this question: https://jsfiddle.net/ereday/82wzwem8/2/ In the fiddle, you'll notice that the table header has a green background. Now, let me share the code snippet from my meteor project: simple-todos.html <head ...

Creating a grid layout similar to Tumblr using HTML and CSS

Struggling all day to figure out how to create a Tumblr-style grid for my website, I'm reaching out here for some assistance. Here is the page: I have a grid of images on my project page that initially looked fine, but as I try to add new elements, i ...

Performing a double running of an Express GET request with an :id parameter

I'm working on an API using node and express, where the main aim is to capture the :id parameter from the request and store it in a variable. This will allow me to query a specific table in my SQLite database based on that particular id. However, I am ...

A step-by-step guide on integrating a Django template tag and HTML element into an HTML page using Javascript

Is there a safe way to insert HTML that includes Django template tags using JavaScript in my project? For instance, if my template contains the following code: <div id="some-element"> <span id="my-tag">{{ my_data }}</sp ...

Module lazily loaded fails to load in Internet Explorer 11

Encountering an issue in my Angular 7 application where two modules, txxxxx module and configuration module, are lazy loaded from the App Routing Module. The problem arises when attempting to navigate to the configuration module, as it throws an error stat ...