Modification of text within a text field via a context menu Chrome Extension

Currently, I am embarking on my first endeavor to create a Chrome extension. My goal is to develop a feature where users can select text within a text field on a website using their mouse and have the ability to modify it by clicking on a context menu.

Below is the snippet from eventPage.js:

chrome.contextMenus.onClicked.addListener(function(clickData) {
  if (clickData.menuItemId === "change" && clickData.selectionText) {

  }
});

And here's an excerpt from the manifest.json:

"background": {
"scripts": ["eventPage.js"],
"persistent": false
},

"permissions": ["contextMenus"]

I'm seeking guidance on what steps I should take next in order to accomplish this task. Any advice or tips would be greatly appreciated!

Answer №1

Greetings, newcomer to StackOverflow! We're glad to have you here! :)

For the solution to your question, follow the provided link below.

Text selection and display in context menu chrome extension

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

WordPress AJAX call results in a response code of zero

TL;DR: Unique - Go straight to code below for issue. You can view the demo I am working on by following this link. In my `functions.php` file, I first localize my script: function ajaxurl(){ wp_enqueue_script( 'product-selector', get_templ ...

jQuery performs perfectly in Chrome but encounters issues in IE9/IE8 and other older versions of Internet

I've implemented this lengthy jQuery script to enable dynamic dropdown loading and updating when selections are changed. However, I'm facing issues in Internet Explorer where the script loads the dropdowns initially but doesn't trigger oncha ...

Guide on how to dynamically add AJAX JSON array response to an HTML table

Hey! I need some advice on how to dynamically append a JSON Array response to an HTML table after submitting a form using AJAX. Here's the scenario: This is my form : <form id="myForm" method="POST"> <input type=" ...

I am facing an issue with effectively passing properties from a parent state to its child component

In the Login component, I set the authentication state using the token as false initially. After a successful login, the token is changed to true. function Login() { const [user, setUser] = useState({ name: '', email: '' }); const [ ...

Singleton constructor running repeatedly in NextJS 13 middleware

I'm encountering an issue with a simple singleton called Paths: export default class Paths { private static _instance: Paths; private constructor() { console.log('paths constructor'); } public static get Instance() { consol ...

How to make Angular 5 wait for promises to finish executing in a for loop

My task involves working with an array like this: arr = ['res1', 'res2', 'res3']; For each value in the arr, I need to make an API call that returns a promise. arr.forEach(val => this.getPromise(val)); The getPromise me ...

The JavascriptExecutor in Selenium with Java is experiencing issues and is not functioning properly for Firefox version 24.0

In a few of my test cases, I've been using the following command because it's quite useful when trying to click on a hidden element that only appears when hovered over some context: ((JavascriptExecutor)driver).executeScript("$('selector_fo ...

Unable to locate module during deployment to Vercel platform

I have developed a website using NextJS. It functions perfectly when I run it through npm run dev, but when I try to build and deploy it on Vercel, I encounter an error stating that it cannot find the module. However, the module is found without any issues ...

Trigger a function when clicking outside the element, similar to how a Bootstrap modal is closed

I have successfully created a popup box using angular in my project. It appears when I click on an icon and disappears when I click on the close button. However, I would like it to also close if someone clicks outside of the popup. Can anyone help me with ...

Using the find() function in Mongoose allows the use of a variable as a model

Would it be feasible to employ a variable in place of the model name when using the find() function in mongoose? For instance, if my website is capable of displaying photos and videos based on the last part of the URL, which could be either /photo or /vide ...

Experiencing issues with applying bootstrap style to pagination when using react-js-pagination

I am currently utilizing the react-js-pagination library to showcase page numbers within my application. Bootstrap has been included in the public/index.html file and can be accessed using className in other components. When it comes to the Pagination com ...

Is there a way for me to create a route similar to Instagram's setup, such as localhost:3000

I am looking to structure my routes similar to Instagram (instagram.com/username). Currently, I have implemented the following route: router.get('/:name', loggedin, function (req, res, next) { res.render('profile', {"Request name" ...

Ways to modify React icons upon clicking them?

Dealing with some icons from react-icons that seem to be causing trouble. Whenever I try to change an icon from outline to filled upon clicking, all the icons end up changing together. It's not functioning as expected. Take a look at my code snippet ...

What are the risks of employing conditional rendering in react-router-dom for authentication purposes?

In the following code snippet: If the authentication data sent from the client matches in the backend, a response with the user ID is sent. If setIsAuth sets to true, the Layout Component will display the first case within the Switch component, allowin ...

Using Vue to Bring in External JavaScript Files

If I have 2 JavaScript files located in the 'resources/assets/js' directory, named 'app.js' and 'ext_app.js', what could be the issue? Within 'ext_app.js' file, there is a function defined like this: function testF ...

Trigger JavaScript keypress event on keypress

In my code, I have a function called addMoney() that is triggered by pressing Enter in an input field: $('body').on('keypress', 'input[type=text]', function(e){ if(e.keyCode==13){ var val = $('input[type=te ...

Add a new row to the table when a dropdown option is selected, and remove the row when deleted. Ensure that the row is only added

Here is my specific requirement: I need a table with a default row containing a dropdown menu in the first column. When an option is selected from the dropdown, a new table row should be added with the same content as the main row and a delete button for ...

The getter function is called before the v-if directive in the child slot component

I have developed a Vue component that needs to perform certain logic and based on that logic, I want to render the content inside the slot. <logic-component> <div>{{ data }}</div> </logic-component> The data is retrieved using a ...

Can you help me transform this javascript code into a JSON format?

Is there a way for me to organize my data so that I have one main question with 5 choices, each associated with a vote? It's like thinking of it as a tree where the question is the root and has 5 leaves, representing the choices, and each choice furth ...

Can webpack or React be set up to automatically import files, eliminating the need to manually use the `import` statement each time?

On a regular basis, I find myself typing: <div style={{display:'flex'}}> ... </div> But it would be more convenient to simply use: <Row> ... </Row> However, I don't want to have to import Row from './Row&ap ...