Extension for Chrome - Personalized pop-up notification when page loads

I am looking to create a custom alert box that triggers on page load instead of the default one, which I find unattractive and possibly irritating for users.

alert('hello');

My current approach involves the following code:

manifesto.js

"content_scripts": [
    {
        "matches": ["http://www.google.com"],
        "js": ["alert.js"]
    }
]

alert.js

window.onload = function()
{
    if(document.body.innerHTML.toString().indexOf('google') > -1 {
        alert('Hello Google');
    }
}

This setup will display an alert box when the user is on google.com. However, I am seeking a more visually appealing solution. I have experimented with notifications, but unfortunately it does not seem possible to implement them via content_scripts. Therefore, my current strategy is to design a friendly custom alert box.

Answer №1

If you are interested in creating a modal box that can be used as an alert, I recommend checking out a11y-dialog.

You can refer to the example provided at https://github.com/edenspiekermann/a11y-dialog/blob/master/example/index.html and utilize the dialog.show(); function within it.

window.onload = function()
{
    if(document.body.innerHTML.toString().indexOf('google') > -1 {
        // Write your code here to generate HTML elements e.g. document.createElement...
        dialog.show(); // Use this to display the modal/alert
    }
}

If you need further assistance, you may also explore using message passing to communicate with a background script for displaying Chrome notifications at specific events.

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

"Using jQuery's animate() function to dynamically change text content

I'm currently venturing into the world of jQuery animate() and decided to create a presentation-style project for practice. However, I've hit a roadblock when attempting to alter the text within my div element in the midst of an animation utilizi ...

Receiving a null value when attempting to access the ids of dynamically created HTML elements using JavaScript

Encountering issue with accessing ids of dynamically generated HTML elements using javascript In my current project, I am attempting to dynamically alter the ids of div elements and remove buttons that are appended to the parent div. The desired functiona ...

Adjusting the brightness of colors using JavaScript

I am looking for a way to return different color tones for a specific color using JavaScript. For example, if I have the color code #4a4a4a, I want to be able to return #494949 and #666464. If there is a package or method that can achieve this, please sugg ...

Generate a fresh FileReader instance using the downloaded file via XmlHTTPRequest

I am attempting to use an XmlHTTPRequest object (level 2) downloaded through a "GET" request in order to create a new FileReader object. My goal is to create the FileReader object within the onload function of the xhr. The file, which is a .gz file, downl ...

Create a dynamic design with Angular Material's mat-drawer at full height using flexbox, allowing content

Yesterday, I encountered an interesting CSS problem involving the mat-drawer and Angular's router-outlet. My layout consists of a full-page flexbox with two children: a mat-toolbar at the top, and a custom component called app-sidenav at the bottom. T ...

The use of script src with vue.js is causing issues

I am looking to move my Vue code into an external .js file. Since I am new to Vue, I am trying to keep it simple without using webpack. However, I have encountered an issue where Vue does not work when using the script src tag in the html file. For instanc ...

How can I turn off credential suggestions in a React JS application?

Is there a way to disable managed credential suggestion on a React JS web page using a browser? I have tried using the autoComplete=off attribute and setting editable mode with an onFocus event, but the password suggestions are still appearing. Any help wo ...

Eliminating empty space within my container

I am facing an issue with a container that contains an image and a button on top of it. There seems to be some extra space created within the container on the right side which is taking up more space than necessary. The layout consists of three horizontal ...

When an image is added, it will display against a backdrop of pure white

Hey there, I have a question regarding an image on my website. I removed the background using PowerPoint, but when I upload it, there is still a white background around it. Even changing the background color doesn't remove the white outline. Any tips ...

What steps should I take to enable Google Maps style on mobile devices?

Hi there! I'm having some trouble styling my Google map. Sometimes the style loads correctly in browsers, and sometimes it doesn't. Another issue I've noticed is that when I view the page on mobile platforms like Android Chrome, iOS Safari, ...

What is the best way to display user input within a paragraph using React?

I've been working on a To-Do list and I have successfully implemented the functionality to add new tasks. The issue I'm facing is that when I try to add a task, it doesn't show up in the paragraph within my Todo component, even though I can ...

A captivating opportunity for a web developer specializing in frontend design

Encountered an intriguing dilemma that has me stumped. There is a single stipulation: Only the json can be altered! I am struggling to meet this requirement: data.hasOwnProperty("\u{0030}") class JobHunter { get data() { return &ap ...

How can I utilize ajax to transmit data to a PHP file and then display the contents of this file within a div utilizing the

This is the script I am using for ajax: var cid = $(this).data('cid'); var sendData = { canidtoset: cid }; $.ajax({ url: '/functions/cv_showinformation.php', type: 'post', data: sendData, dataType: 'json ...

HTML: Choose from a list of options by selecting multiple items from

I want to implement a select field with the multiple attribute as a standard dropdown field with size=1: <select name="test[]" size="1" multiple> <option>123 <option>456 <option>789 </select> Any reason why the a ...

Deleting a hyperlink within a content-editable area

Presently, I am in the process of working on a straightforward project where users can format text using contenteditable. I have successfully implemented a feature that allows users to add hyperlinks to selected text by clicking on the "Create Link" button ...

Sending information from a Vuex module to a component following an axios request

I'm currently working on developing a Vue.js based application. Here's the scenario I'm facing: I have a component with a popup where users can create an 'expense' entry. Upon clicking the 'save' button, a function in the ...

Can you explain the role of the faceVertexUV array within the three.js Geometry class?

Currently, I am utilizing three.js to create curved shapes using parametric functions. Within the THREE.js javascript file, there is a function called THREE.ParametricGeometry that continuously adds 2D vectors to the faceVertexUvs array. I am curious abo ...

Managing the vertical dimensions of a div

I've created a unique set of visually appealing cards that house meaningful messages within an infinite scrolling feed. The intended functionality is for the complete message to be displayed upon clicking a "more" button, as the messages are typically ...

Navigating with nodeJS

Currently, I am in the process of learning how to create a Node.js project. My latest endeavor involved following a tutorial to develop a chat application. However, it seems like there is an issue with the routing between the server side and client side. ...

Countdown with precision! This timer will begin at the one-hour mark

Having an issue with my JavaScript stopwatch. When I hit the start button, the stopwatch immediately shows one hour (01:00:00) before counting normally. Any solutions to prevent this instant start at one hour would be highly appreciated. Thank you in adv ...