How can I use a Google extension to interact with buttons on a webpage?

In my project, I have created an extension file named github.js

jQuery(document).ready(function($) {
  console.log('github.js');
  // btn btn-primary shelf-cta
  var button = $('.btn.btn-primary.shelf-cta');
  console.log('button.html() = ', button.html());
  button.click();
});

The next file is popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Document</title>
</head>
<body>
  <button id="send_messages">Send Messages</button>

  <script src="libs/jquery-v3.3.1.js"></script>
  <script src="popup.js"></script>
</body>
</html>

Now we move on to the file popup.js

jQuery(document).ready(function($) {
  console.log('popup.js');

  $('#send_messages').click(function(event) {


    console.log('github test');
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
      chrome.tabs.executeScript(
        tabs[0].id,
        {file: "libs/jquery-v3.3.1.js"},
        function(){
          chrome.tabs.executeScript(
            tabs[0].id,
            {file: "github.js"}
          );
        }
      );
    });
  });
});

Lastly, there's a file named manifest.json

{
  "name": "test the extension",
  "version": "1.0",
  "description": "Automatically send the message to the opened projects in the browser",
  "permissions": [
    "tabs", 
    "activeTab", 
    "declarativeContent", 
    "storage",
    "<all_urls>"
  ],
  "options_page": "options.html",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

When visiting the github page at https://github.com/, you may notice a button titled "read the guide" that you want to click. Upon clicking the browser action button for the extension, a pop-up window appears. However, clicking the "send a message" button does not trigger any action. Despite being able to locate and display the title of the "read the guide" button, the functionality of button.click(); remains non-functional. Any suggestions on how to effectively interact with buttons or links on the webpage?

Answer №1

To make the click event in jQuery work, you should utilize the following code snippet:

button.get(0).click();

This is the correct way to handle the click event, as opposed to what I originally attempted:

button.click();

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

Currently, I am on a quest to locate a particular item within an array through the power of node.js

Here is the array I am working with: [ { "_attributes": { "key": "attributes" }, "dt_assoc": { "item": { "_attributes": { "key": "status" }, ...

Accessing a document using protractor

It seems like every protractor example I come across online uses browser.get with a web URI. browser.get('http://localhost:8000'); I want to use Selenium to navigate to a local file:// path without needing a web server running. Just a simple HT ...

Extract data from JSON using the parse function

After utilizing the function JSON.stringify(), I have obtained this JSON: {"get":"function (f,g){'use strict';var h,i;if(i={},'string'==typeof f){if('object'==typeof g)for(h in g)i[h]=g[h];i.url=f}else if('object'== ...

Prevent memory leakage by utilizing Angular's $interval feature in countdown processes

I have a controller set up to handle a countdown feature: var addzero; addzero = function(number) { if (number < 10) { return '0' + number; } return number; }; angular.module('theapp').controller('TematicCountdownCo ...

Guide on effectively managing props within a single component in React Navigation

When attempting to navigate from my App component to the GamePlay component, I encountered an issue. Here is a snippet of my App.js: import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; imp ...

Expanding a Node.js class to incorporate additional static class elements

I have a query where I believe that extending a class might be the solution, but I am not entirely sure. Here is the scenario... There is a class defined as follows: class Field { apiName; /** * Creates an instance of Field with the given par ...

Commencement of timeline utilizing amchart's gantt feature

I am currently utilizing the Gantt chart feature in Amchart. The chart segments are organized based on dates. I am looking to specify a specific initial location for the chart's navigator between two dates, rather than having it applied across the en ...

Determining whether today is the same as a particular date with moment.js

I need to determine if today's date is the same as a specific date using moment.js. const today = moment(new Date()).format('DD/MM/YYYY') console.log(today) // "28/09/2021" const expiry = moment(new Date('2021/09/28')).format(&apos ...

Display a jQuery alert when an AJAX post request exceeds its timeout limit

I have been working on creating a feature to notify users when their $.post() request times out. To achieve this, I have implemented the following code snippet: //when ajax request start show overlay $(document).ajaxStart(function(){ ...

Troubleshooting a shadow mapping problem in three.js involving a ShaderMaterial that alters the positions of vertices

Within my current project, I have implemented a ShaderMaterial to depict terrains. The positions of the vertices are adjusted in the vertex shader based on information from a height map texture: vec4 mvPosition = modelViewMatrix * vec4( position + normal ...

What is the best way to integrate Vue application server with Express?

I'm currently using a Vue app that is accessible at http://localhost:8080/ (using Vue CLI), and my backend is operating on Express at http://localhost:7070. I'm curious if there is a way to integrate both the frontend and backend under the same a ...

Implement a feature in JavaScript that highlights the current menu item

I'm currently developing a website at and have implemented a JavaScript feature to highlight the current menu item with an arrow. The issue I'm facing is that when users scroll through the page using the scrollbar instead of clicking on the men ...

In the ASP.NET framework, users can download an Excel file using Response.End, accompanied by a JavaScript loader on the client side. While I have successfully implemented the loader, I

Is there a different approach to displaying or hiding a loader when using Response.write and Response.end, as the client script does not function properly after response.end()? ...

Video playback disabled on hover in Chrome browser

I have added videos to a search results page. When the user hovers over the video, I want to show a preview of it in a separate container and start playing the video. $(".videoSearchResults video").mouseenter(function () { var container = document.cre ...

Share the constructor and enumeration in an npm module for exportation

My background in NPM and Node.js is limited, as my expertise lies mainly in JavaScript for web browsers. Recently, I created a JavaScript library that consists of a constructor function and an enum type. In JavaScript, enums do not exist natively, so the ...

Choose a collection of elements and encase them within a <div> tag

I am currently working on creating a greasemonkey script for a webpage that has a rather challenging structure. My goal is to show and hide different entries, but the content is formatted like this: <a name="first"/> <h3>First</h3> Some ...

Utilizing Array in ReactJS with the Power of Hooks

My current situation involves having an array of FooBar objects interface FooBar { foo: string, bar: string, correct: string, other: string[] } const [arrOfObj, setArrOfObj] = useState<FooBar[]>([ { "foo": "fool ...

The second JSP page fails to load following an AJAX POST request

The following code snippet is found in page1.jsp. $.ajax({ type: "post", url: "page2.jsp", data: newdata, success:function(msg){ return msg; } ...

Puppeteer with Typescript: Encountering issues during the transpilation process

The issue stems from the fact that I am unable to use Javascript directly due to Firebase Functions Node.JS version lacking support for Async/Await. As a workaround, I have converted the code into Typescript and am currently attempting to transpile it to c ...

Exploring the parent of an HTML element / Finding a child element with unique content

Struggling with a challenge from frontendmentor that involves JavaScript. I need help on making the script detect if a P tag contains 0 as its content and then applying a different style to the containing div. <section class="pledge-box sub-section ...