Chrome扩展程序-页面加载时的自定义提醒框

Question

I want to make a custom alertbox that executes on page load, as the default

alert('hello');

is very ugly & I believe annoying for user interaction.

My current code is:

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');
    }
}

which will execute an alarm box if the user is on google.com, but I want something a bit prettier, I've tried using notifications but unfortunately it doesn't seem as though you can implement it via content_scripts. So my current route is to produce a friendly custom alertbox

Answer 1

If you want to make a modal box (which you could use as an alert) I'd suggest a11y-dialog .

You could use the example from https://github.com/edenspiekermann/a11y-dialog/blob/master/example/index.html and call dialog.show(); inside that

window.onload = function()
{
    if(document.body.innerHTML.toString().indexOf('google') > -1 {
        //code to make the html e.g. document.createElement...
        dialog.show(); //to force the modal/alert to show
    }
}

Hope that helps, otherwise you could look at message passing to tell a background script when to show the chrome notification