Opening a browser tab discreetly and extracting valuable data from it

Greetings to the experts in Chrome Extension development,

I am exploring ways to access information from a webpage without actually opening it in a separate tab. Is there a method to achieve this?

Here's the scenario: While browsing Site A, I come across a list of URLs (Site B, C, D) on the page. My goal is to find the first URL (from B, C, D) that contains a specific element with a known tag ID. To do this, I need to systematically open each URL and check for the presence of the element. If I locate the element on Site B, I should halt the process or make a note of it.

I'm unsure if AJAX can help me accomplish this task. Any guidance would be greatly appreciated. Thank you in advance. Let me know if any clarification is needed.

javascriptajaxgoogle-chrome-extension

Answer №1

Ajax can be utilized to achieve this task. The background page doesn't face cross-domain restrictions when appropriate rules are declared in the manifest file. This allows for loading any site through ajax, performing searches (jQuery is recommended), and transmitting results back to the content script if necessary.

Example of an Ajax request using jQuery:

$.ajax({
    url: "http://google.com",
    type: "GET",
    dataType: "html",
    error: function() {
        // Handle errors
    },
    success: function(html) {

        //"html" variable contains the entire page source as a string

        // Search within the HTML using jQuery
        var el = $(html).find("#prm");
        if(el.length) {
            console.log("Element with id 'prm' found");
        }


    }
});

Manifest configuration allowing Ajax requests to all sites:

"permissions": [
    "http://*/*", "https://*/*"
],

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

Is there a way to securely store my JWT Token within my application's state?

userAction.js -> Frontend, Action export const login = (userID, password) => async (dispatch) => { try { dispatch({ type: USER_LOGIN_REQUEST }); const url = "http://localhost:8080/authenticate/"; const ...

javascriptreactjsjwt

The POST function isn't functioning correctly within the temp.js file

My issue with the post method: var newUser = { "user5" : { "name" : "john", "password" : "qwerty123", "profession" : "developer", "id": 5 } } app.post('/createUser', function (req, res) { // Reading existing use ...

javascriptjsonnode.jsexpress

Issue with React container not connecting properly

I am currently facing an issue with a search bar where the input value is not displaying properly. Even when I check the value in the console, it only shows one character at a time. https://i.stack.imgur.com/Qm0Lt.png My assumption is that there might be ...

javascriptreactjs

Encountering a RuntimeError during the integration of Angular Js in Rails with ExecJS

Currently, I'm working on integrating Angular Js into a Rails Project and I've been following the tutorial provided at . However, after completing all the steps, I encountered the following error: https://i.sstatic.net/ehYCb.png I've searc ...

javascriptruby-on-railsangularjsnode.jstwitter-bootstrap

Tips for constructing an AJAX response structure in Coldfusion by combination of an integer and varchar field

I am facing an issue with combining two fields in a Coldfusion application. Currently, I have a query that returns an integer in one column and a currency in another column. In my output table, I display the total followed by the currency, like this: & ...

ajaxloopscoldfusionstruct

Retrieving FormData using ajax and passing it to aspx.cs code

After adding a debugger in the console, I am receiving confirmation that the file has been uploaded successfully. However, the debugger is not reaching the code behind, or in other words, the code behind is not accessible. This is the JavaScript file: fun ...

javascriptasp.netaspx-user-control

Tips for retrieving information from a web endpoint using Angular

My task involves utilizing Angular to retrieve data from a web endpoint and display it to the user. The setup requires configuration through bower and the use of grunt as a task manager. I have already installed bower, Angular, and Bootstrap, with the pag ...

angularjsajaxbower

Having trouble getting the form to serialize properly, unable to locate the error. Frustrating!

Hello, Here is the jQuery code I am currently using: $('body').on('change','form#item-form', function(e){ e.preventDefault(); var data = $(this).serialize(); console.log( data ); }); and a form (inserted via que ...

jqueryajaxformsserialization

Exploring the possibilities of utilizing React server components in my project

I am interested in experimenting with the new React API for making server-side component calls. However, I am unable to find any information on how to begin a project using server components. In an example of source code that I stumbled upon, it mentioned ...

javascriptreactjsserver

Asynchronously load an AngularJS controller from AJAX without altering the route

I am looking to dynamically load an Angular controller after making an AJAX call that generates a new view in HTML. Here is the setup I currently have: Example of a View: HTML Snippet From AJAX <!-- CVS Pharmacy Extracare - Add View --> <d ...

javascriptjqueryhtmlangularjsajax

Dealing with JSON Stringify and parsing errors in AJAX

I've been troubleshooting this issue for hours, trying various suggestions found online, but I'm still encountering a problem. Whenever I encode function parameters using JSON.stringify and send them to my PHP handler through AJAX, I receive a pa ...

javascriptphpjqueryajaxjson

How can I stop the body from scrolling to 100% height when the virtual keyboard is displayed?

My chat app has sticky header and footer elements. To handle the mobile virtual keyboard opening, I adjust the document's height using window.visualViewport.height. For example, if the browser's height is 1000px and the virtual keyboard takes up ...

javascriptcssweb-applicationssticky-footerintersection-observer

Struggling to interpret the array of objects retrieved from a call to UrlFetchApp.fetch in Google App Script

When UrlFetchApp.fetch is called, it provides an array of objects that are stored in the variable 'results': var results = [{"Category 1": "Benefits/Compensatio", "Category 2": "Compensation", "Category 3": "Recognizing You", "Processing Team": ...

javascriptarraysparsinggoogle-apps-script

Why is it that a click event outside of an HTML element cannot be detected in this Vue 3 application?

I've been diving into building a Single Page Application using Vue 3, TypeScript, and The Movie Database (TMDB). Currently, I'm focused on developing a search form within my project. Within the file src\components\TopBar.vue, here&apo ...

javascriptvue.jsvuejs3

Adding rows dynamically to multiple tables on a single page using a single function

I am facing a situation where I have multiple tables and a function that adds rows to these tables: <table id="table1" style=" border-collapse: collapse;"> <tr id="table1row1">... <tr id="table1row2">... <table id="table2" style=" bor ...

javascriptjqueryhtmlhtml-tableincrement

Infinite rendering caused by React custom hook

I developed a custom hook that retrieves data from a News API and provides handling for loading, errors, and data (similar to Apollo Client). The issue I'm facing is that the hook seems to trigger infinitely, even when the items in the dependency arra ...

javascriptreactjstypescriptreact-hooks

Press anywhere outside the container to conceal it along with the button

Utilizing an Angular directive to hide div elements when the user interacts outside of them has been effective. However, there is a specific issue that arises when clicking outside of a div on a button that toggles the visibility of the div. The 'ang ...

javascriptcssangularjshtml

Exploring the orderBy feature in the react-firebase-hooks library with NextJS

Recently, I've been utilizing the React Firebase Hooks package from this GitHub repository. The code snippet below has been functioning smoothly for me. const [posts, loading, error] = useCollection( firebase .firestore() .collection(& ...

javascriptreactjsgoogle-cloud-firestorereact-hooksnext.js

What is the best way to retrieve JSON values based on a key using JavaScript, jQuery, or AngularJS?

Here is some JSON data that I need help with: var jsonData = { "title": "Testing", "settings": { "mySettings": false }, "jsonList": ["TestingList"], "testJsonVals": { "Test1": { "name": "name1", ...

javascriptjqueryangularjsjson

Obtain the range of values for a match from an array using Vue.js

I have an array in my Vue.js code with values 25, 100, 250, and 500. I am looking to find the key value that matches a specific range. For example, if the input is 5, then the output should be 25. However, the code I tried returns all values within the ran ...

javascriptvue.js