Detecting modifications to the DOM when there are no identifiable IDs or classes

I'm currently troubleshooting a bug in my Gmail Google Chrome extension where I need to identify when the Rich Format bar is visible. Unfortunately, all the ids and classes are encrypted and unreliable.

To locate the message canvas

this.canvas_frame_document.evaluate("//iframe[contains(@class, 'editable')]",
   this.canvas_frame_document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
   null);

and to find the Rich Text bar

this.canvas_frame_document.evaluate("//img[@command='+underline']",
    this.canvas_frame_document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null);

This method works effectively for composing new emails because the canvas dom is present and detectable.

However, it doesn't work when replying, replying to all, or forwarding emails because the dom changes dynamically and 

chrome.tabs.onSelectionChanged.addListener
cannot detect page changes like it does for Compose.

javascriptgoogle-chrome-extension

Answer №1

To simplify things, consider using jQuery.live().

For a more advanced approach, you can attach your check to the DOMNodeInserted event that triggers when a new element is added to the DOM. If that doesn't cover all cases, try the broader DOMSubtreeModified event which activates whenever the DOM is altered in any manner. Additional information on events can be accessed here.

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

When receiving JSON and attempting to store the data in a variable, I encounter an issue where it returns the error message "undefined is not iterable (cannot read property Symbol

I'm currently integrating the Advice Slip API into my project. I am experiencing an issue when trying to store the JSON data in a variable like so: let advice; fetch("https://api.adviceslip.com/advice").then(response => response.json()). ...

javascripttypescript

Binding textarea data in Angular is a powerful feature that allows

I am looking to display the content from a textarea on the page in real time, but I am struggling to get the line breaks to show up. Here is my current code snippet: app.component.html <div class="ui center aligned grid">{{Form.value.address}}< ...

javascripthtmlangularangular2-databinding

Passing arguments to an external function in jQuery from a dynamically loaded Ajax page

Despite its confusing title, the issue at hand is actually quite simple. My homepage contains a script that loads an external PHP file for a specific section of my website. Within this PHP file, I need to call a function from the main JavaScript file (th ...

phpjavascriptjqueryajax

Using Selenium to interact with drop-down lists using div tags instead of select tags

As a newcomer to automated testing using Selenium Web Driver, I am struggling to test drop down lists for the location type without relying on the select command. The element in question is enclosed within a div tag. I attempted sending keys but that meth ...

javascriptpythonhtmlseleniumweb-scraping

Encountering an illegal invocation error in jQuery

Recently delving into the world of jQuery, I am attempting to call a C# function from JavaScript using AJAX and jQuery. Additionally, I need to pass some parameters while making the call to the C# function. Here is how I am attempting to achieve this: var ...

c#javascriptjqueryajax

WebView no longer refreshes when the document location is updated

I currently have a basic HTML/JavaScript application (without Phonegap) that I utilize alongside a native Android app and a WebView. When certain situations arise, I need to reload the current page in the JavaScript portion. On my old phone with Android 4 ...

javascriptandroidwebview

The Javascript query is returning an [object Object] data type

I am facing an issue with a JavaScript file that is querying a SharePoint list. Specifically, the Priority drop down in the query result is displaying as [object OBJECT]. I suspect it has something to do with the var query string where I have added the &ap ...

javascriptjsonsharepoint-2010

What is the best way to reload (using F5) and navigate to a new page using AngularJS?

In my web application, there are two pages with forms: purchase1 and purchase2. If a customer refreshes the purchase2 page, I want them to be redirected back to purchase1. I've been struggling to achieve this by configuring a setup like: .config(fu ...

javascriptangularjs

Incorporating User Input: Adding Paragraph Elements with HTML and Javascript to a Div Container

I am attempting to test my ability by creating a basic webpage. My goal is to take the text entered by the user in a textarea and add it to the page using a button. This button should generate a new paragraph element, place the user input inside of it, and ...

javascripthtml

The dynamic text feature in my Angular Material gridlist functions perfectly in CodePen, however, it fails to work when

I have enhanced the Angular material gridlist demo by incorporating static and dynamic texts into the grid tiles. While this modification works flawlessly on Codepen (see my provided link), it does not function properly when deployed on my server. The sta ...

javascriptangularjsangular-material

Even after diligently assigning a unique key to each child in react, why do I continue to encounter an error?

I've attempted this task previously and have provided a key, but for some reason I keep encountering an error. As I am relatively new to working with React, it's possible that there is a simple mistake hiding somewhere within my code. Update: Th ...

javascriptreactjsreduxreact-redux

Ways to identify an element within a webpage

I'm currently working on creating a chrome extension that can detect the presence of specific elements on a webpage. The goal is to have this extension automatically run every time a new page is opened and display a popup message if the element is fou ...

javascripthtml

Ways to Resolve the Error "Uncaught TypeError: Cannot Assign Value to Undefined Property '0'"

After experimenting with the code below, I discovered that when arrays (bill, tipValue, totalAmmount) are declared within the object method, I encounter a "cannot set property '0' undefined" error. However, if the same arrays are declared outside ...

javascriptarraysobjectmethodsuncaught-exception

Issue with the Material UI theme module enhancement feature not functioning as expected

I've been researching the MUI documentation, blogs, and various posts on Stackoverflow, but despite my efforts, I can't seem to get my vscode intellisense/typescript to recognize the changes I've made. These are fairly straightforward modif ...

javascripttypescriptnext.jsmaterial-uimodule-augmentation

The functionality of a pop-up window is not compatible with Google Maps

I recently implemented a script on my webpage that triggers a popup window every time the page is loaded. Here's how the script looks: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ColorBox de ...

javascriptjqueryhtmlcss

unable to display preview images using the youtubev3 API

Currently in the process of creating a YouTube clone using the YouTube V3 API import React from 'react' import { Link } from 'react-router-dom'; import { Typography, Card, CardContent, CardMedia } from '@mui/material'; import{ ...

javascriptreactjsmaterial-ui

Angular: Assigning a key from one variable to a value in another

I am currently facing a challenge with rendering a form on a page using ng-repeat, where the data for this form is dynamically fetched from a request. Within this data, there is a nested array called "categories" which contains IDs. I want to display the n ...

javascriptangularjsarrays

Using Jquery to Retrieve the Content of Head and Body Tags from a String

Here is a string that I currently have: <head> This is the Head </head> <body> <div> <div> <p> Body Content <br /></p> <p>&nbsp; Hello World <br />< ...

javascriptjqueryhtmltags

Neglecting the Outcome of Async/Await

I am facing an issue where I need to send different SMS messages to different recipients synchronously, but my current implementation using async/await is not producing the expected results. Below is the code snippet causing the problem: Upon querying fo ...

javascripttwiliotwilio-api

Ensure Safari sends the Origin header in jQuery GET requests

When I send a request from https://app.example.com, the following code is executed: $.get('https://api.example.com', { foo: 'bar' }) .success(getSuccess) .error(getError); This script runs smoothly on Chrome and Firefox, however, ...

javascriptjqueryajaxsafaricross-domain