Error in Chrome Extension Data Type

I am having trouble adding a highlighted red button to YouTube. The code does not seem to be working as expected.

manifest.json

{
  "name": "Example",
  "version": "0.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "js": ["content.js"],
      "matches": ["<all_urls>"],
      "css": ["style.css"]
    }],
  "browser_action": {
    "default_popup": "addon_menu.html",
    "default_title": "Example"
  }
} 

content.js

console.log("Example is on!");


var  sttndiv = document.createElement("div");
var sttnbtn = document.createElement("button");
sttndiv.appendChild(sttnbtn);
document.getElementById("buttons").getElementsByClassName("yt-live-chat-message-input-renderer")[0].appendChild(sttndiv)[0];

Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')

https://i.sstatic.net/pzMZo.png

Answer №1

Upon analyzing the error message and applying basic logic, it is apparent that the variable sttndiv is not defined. This could potentially be due to an extra space preceding its declaration.

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

Interference in the output of .innerHTML leads to disruption

I have been working on a feature to display a calculated price based on the selected quantity for each individual product. I attempted to duplicate the code and modify variable names, but encountered issues with the increase/decrease buttons triggering mul ...

Stop the print dialog box from causing the page to refresh

I have implemented a print button for an invoice: </script> <!--Function for printing invoice--> <script> function printpage() { window.print() } </script> <button id="print" name="print" class="btn btn-info" onClick="pri ...

Create a PDF file discreetly

Currently, I am working on a classic asp page that generates a PDF and serves it to the browser. My goal is to create a loading page that preloads the PDF in the background before presenting it to the user, along with a visually appealing indication of ong ...

Uniform Image Sizes in Bootstrap Carousel (With One Exception)

I am encountering a JavaScript exception related to image size. I am trying to set a fixed size for the images in my carousel, allowing them to auto adjust or resize without concern for distortion or pixelation. I have experimented with max-width and widt ...

Ways to effectively pass arguments to the callback function within the catch function in JavaScript

While working on my code, I suddenly felt the need to pass an extra argument, "msg", to the callback function renderError(). This extra argument should be passed along with the default error argument generated by the catch function itself. I tried doing i ...

Learn how to implement Basic Authentication in your Express application using the express-basic-auth package. You can easily trigger login and logout

When it comes to logging out a user who has logged in using basic Auth, I am exploring different options by consulting various sources like: link1 link2 In my application, I have implemented express-basic-auth to secure certain routes. Here is an example ...

Is it possible to utilize the @next/env package within the next.config.js file?

I'm looking to access the environment configuration from next.config.js in order to utilize some environment variables specified in .env.local and establish server runtime configurations based on them. Is it appropriate to use next.config.js for this ...

javascript create smooth transitions when navigating between different pages

As a newcomer to JS, I am currently working on creating a website with an introduction animation. My goal is to have this animation displayed on a separate page and once it reaches the end, automatically redirect to the next webpage. <body onload="setT ...

Is it possible to refresh the browser with a specific URL using Node or Gulp?

Excuse me if this is not the appropriate place to pose my query. Unfortunately, due to the limitations of my workplace/CMS setup, I am unable to access a local version of the website for development purposes. Instead, we are working on CSS and JS locally ...

What is preventing me from passing a JSON array as data in a GET request using jQuery Ajax?

When sending a get request like the one below: $.ajax({ url: 'http://localhost:8000/api/points/', contentType:"application/json", dataType: "json", data: JSON.stringify({"content_type":content_type,"object_id":object_id}), t ...

Issue with content overlapping when hamburger icon is tapped on mobile device

When the hamburger menu is pressed on smaller screens, I want my navbar to cover the entire screen. To achieve this, I included the .push class in my code (see the jQuery and CSS) to trigger when the .navbar-toggle-icon is pushed. However, after implemen ...

Guide to capturing mouse drag coordinates using JavaScript within a JSP page

My task is to record the starting coordinates (x,y) and ending coordinates (x,y) of a mouse event. For example, on an HTML page with an image, users should be able to select a specific area by dragging the mouse. Therefore, I need to capture the coordinat ...

Ways to achieve 8 columns in a single row using Javascript and Bootstrap

Recently, I created a simple function for searching movies and manipulating them in the DOM. The issue arises when a movie name is entered and the API response returns around 20-30 recommendations. I wanted to display this fetched data in 8 columns per row ...

Why do query values disappear when refreshing a page in Next.js? [Illustrative example provided]

In my current project, I am developing a simple Next Js application consisting of just two pages. index.tsx: import React from "react"; import Link from "next/link"; export default function Index() { return ( <di ...

What is the most effective method for postponing the loading of JavaScript?

Incorporating a bootstrap theme into my project has required me to include several javascript files. The challenge arises when some pages load dynamic content from the server, resulting in the entire HTML not being present when the javascript files are exe ...

I am having trouble authorizing a GET request with fetch

I've been attempting to utilize fetch in the browser, but it's not cooperating. Here's what I tried: fetch('https://api-2sizcg3ipa-uc.a.run.app/fats', { headers: {'Authorization': 'Basic ' + btoa('username ...

Tips for dynamically adding an external SVG animation to your website:

When trying to insert an animated SVG using jQuery or plain JavaScript, they appear static in Chrome and Edge, but display correctly in Firefox: $(".loader").prepend("<svg><use xlink:href='/images/icons.svg#loading-ring'></use> ...

The Vue CLI build is displaying a blank page when hosted on an Apache server

I encountered an issue with vue cli. Running npm run serve went smoothly, but when I tried dev mode using npm run build-dev, the build process finished with a blank page displayed. The error message received was "Uncaught SyntaxError: Unexpected token &ap ...

Should case sensitivity be disregarded in an array's input?

I need to search for a value in an array, but the search should be case-insensitive. How can I achieve this? This is the code snippet I am using: $.ajax({ type: "GET", url: "ajax.php", dataType: "json", data: { pageType: pageType, input: request.term, da ...

The React Bit Dev module is showing a 404 error

Attempting to incorporate the semantic-ui-react table reusable component from the Bit.dev community into my application. The link I am using is: To add this component to your application, use: npm i @bit/semantic-org.semantic-ui-react.table However, when ...