Не удается заставить onclick работать с введенной кнопкой через сценарий содержимого в расширении Chrome

Я разрабатываю расширение для Chrome, которое вставляет кнопку на веб-страницу. Я могу успешно ввести кнопку, но не могу применить к ней функцию onclick. Я написал код внедрения кнопки в content.js, который выглядит следующим образом 

jQuery('body').append('<button onclick="myFxn();" class="vwsItBtn" style="height: 25px; width: 80px; position: absolute; opacity: 1; font-size: 12px; z-index: 867530999; display: block; padding-right: 4px !important; margin: 0px; border: 2px solid rgb(254, 208, 70); background-color: whitesmoke; border-radius: 4px; font-weight: bolder; text-shadow: #FED046 0px 0px 1px; color: #36373B; text-align-last: end;"><img id="myImgVw" style="width: 15px; display: inline-block; padding: 0px; left: 2px; position: absolute; vertical-align: middle !important; top: 3px;" src="'+chrome.extension.getURL("imgvwextsitbtn.png")+'"/> Schedule</button>');

jQuery(function(){
    function myFxn(){
        alert('This is working!');
    }
})

Теперь я получаю сообщение об ошибке, что myFxn не определен. Теперь эта функция довольно проста, но как мне заставить ее работать?

Я впервые разрабатываю расширение для Chrome, и я почти уверен, что есть какой-то другой способ сделать это. Пожалуйста помоги!!


google-chrome jquery google-chrome-extension javascript-injection
person Tushar Shukla    schedule 27.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что функция myFxn() объявлена ​​в рамках обработчика jQuery document.ready, тогда как для доступа к атрибуту on* она должна быть глобальной. Попробуй это:

jQuery('body').append('<button onclick="myFxn();" class="vwsItBtn" style="height: 25px; width: 80px; position: absolute; opacity: 1; font-size: 12px; z-index: 867530999; display: block; padding-right: 4px !important; margin: 0px; border: 2px solid rgb(254, 208, 70); background-color: whitesmoke; border-radius: 4px; font-weight: bolder; text-shadow: #FED046 0px 0px 1px; color: #36373B; text-align-last: end;"><img id="myImgVw" style="width: 15px; display: inline-block; padding: 0px; left: 2px; position: absolute; vertical-align: middle !important; top: 3px;" src="'+chrome.extension.getURL("imgvwextsitbtn.png")+'"/> Schedule</button>');

function myFxn(){
    alert('This is working!');
}

Еще лучше, поместите свои стили в отдельные таблицы стилей, чтобы сделать ваш HTML проще и лучше отделить от стилей, а также не используйте устаревшие атрибуты событий on* и вместо этого используйте ненавязчивый Javascript для присоединения обработчиков событий. Поскольку вы уже используете jQuery, вот пример того, как это сделать:

.vwsItBtn {
    height: 25px; 
    width: 80px; 
    position: absolute; 
    opacity: 1; 
    font-size: 12px; 
    z-index: 867530999; 
    display: block; 
    padding-right: 4px !important; 
    margin: 0px; 
    border: 2px solid rgb(254, 208, 70); 
    background-color: whitesmoke; 
    border-radius: 4px; 
    font-weight: bolder; 
    text-shadow: #FED046 0px 0px 1px; 
    color: #36373B; 
    text-align-last: end;
}
#myImgVw {
    width: 15px; 
    display: inline-block; 
    padding: 0px; left: 2px; 
    position: absolute; 
    vertical-align: middle !important; 
    top: 3px;
}

jQuery(function($) {
    $('body').append('<button class="vwsItBtn"><img id="myImgVw" src="' + chrome.extension.getURL("imgvwextsitbtn.png") + '"/>Schedule</button>');

    $('.vwsItBtn').click(function() {
        alert('This is working!');
    });
});
person Rory McCrossan    schedule 27.04.2016
comment
Я уже пробовал это раньше, но это ошибка: (индекс): 1 Uncaught ReferenceError: myFxn не определен - person Tushar Shukla; 27.04.2016
comment
Вдобавок к этому я только что заметил, что консоль показывает, что эта ошибка находится в индексном файле, однако в моем расширении такой страницы нет. Эта «индексная» страница относится к веб-сайту, на который я ввожу свой скрипт. Но почему он ищет myFxn в индексе? - person Tushar Shukla; 27.04.2016
comment
Это сработало, совершил глупую ошибку. Большое спасибо. Ваш ответ показал мне правильный путь! - person Tushar Shukla; 27.04.2016
comment
Нет проблем, рад помочь. - person Rory McCrossan; 27.04.2016
comment
Важно понять, почему первое решение по-прежнему не работает. Скрипты содержимого живут в изолированном контексте; создание элемента с атрибутом onclick создаст обработчик в контексте страницы, в то время как обработчик создается в контексте сценария содержимого. Второе решение позволяет избежать этой проблемы, сохраняя все в контексте сценария содержимого. - person Xan; 27.04.2016
comment
@Xan Спасибо за информацию. Если вы проверите мой второй комментарий к этому ответу, я думал о чем-то подобном и позже понял, что вы упомянули, после понимания этого ответа. - person Tushar Shukla; 28.04.2016
comment
Мне было интересно, можете ли вы помочь мне с тоже вопрос? - person Tushar Shukla; 29.04.2016