chrome-extension：等待用户输入

Question

I am basically wanting to let a user click an element on the page, and have the background.js continue on. The whole action is synchronous, meaning the background script waits for the user input and once it happens it carries on. I'm also trying to stop the navigation from happening (ex. when user clicks on a link) but chrome will warn everytime 'Are you sure you want to leave this page?' I'd like to make it silent.

however, it seems like I can't manipulate the dom from background.js so I put this in the content script instead/

function getInput(callback) {
    //on click, fire callback, user has finished input
    $(document).on('click', '*', function (e) {
        $(e.target).addClass('highlight');
        callback();
    });

}

Do I now need to implement callback(); by sending a message back to the background.js?

Also, is the dom only manipulatable from the content script and not the background.js?

Answer 1

Chrome extensions are, by design, asynchronous. You cannot block the browser with extension callbacks in any sane manner. The only possibility would be to either use the built-in "confirm" method, or to use the webNavigation/webRequest API, which is rather heavy for this task.

And no, the background script can not modify the DOM of the page directly. You would need to use message passing.

Here is an example using "confirm"

function getInput(callback) {
    //on click, fire callback, user has finished input
    var answer = confirm("Prompt for user here..."); // Provides OK/Cancel button w/ passed message
    if (answer === true) { // The user clicked OK.
        $(document).on('click', '*', function (e) {
            $(e.target).addClass('highlight');
            callback();
        });
    } // The user clicked cancel; else logic here, if needed
}