Я создаю расширение chrome для базовой c функциональности моей учетной записи в социальной сети. Человек создал простое расширение для открытия сайта после нажатия во всплывающем окне. js кнопка отправки, и она сработала хорошо.
Но когда я попытался создать функциональность в другом проекте с нуля, чтобы начать с входа в систему, а затем продолжить, это не работает.
Я пытаюсь отправить входные значения в форму входа. в консоли, когда я помещаю код document.getElementsByClassName("_2hvTZ pexuQ zyHYP")[0].value = "username";, он показывает значение, которое должно быть установлено в элементе ввода, но когда я нажимаю где-нибудь на веб-странице, оно становится пустым.
Я пробовал много разных кодов и методов, но все В итоге возникла такая же проблема.
это последний код, который я собрал после просмотра более десятка вопросов здесь. Пожалуйста, помогите.
У меня есть базовые c и промежуточные знания JavaScript, и я могу понимать письменные коды. но это мой первый раз с кодом расширения google chrome. и я плохо понимаю, как все это работает за сценой.
манифест. json
{
"name": "Test extension",
"version": "0.0.1",
"manifest_version": 2,
"description": "test extension",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"browser_action": {
"default_icon": "icons/icon19.png",
"default_title": "browser action demo",
"default_popup": "src/browser_action/browser_action.html"
},
"permissions": [
"bookmarks",
"chrome://favicon/",
"clipboardRead",
"clipboardWrite",
"contentSettings",
"contextMenus",
"cookies",
"tts",
"ttsEngine",
"history",
"idle",
"management",
"notifications",
"tabs",
"geolocation",
"https://*/* "
],
"omnibox": {
"keyword": "test extension"
},
"content_scripts": [
{
"matches": [
"https://www.instagram.com/*"
],
"js": [
"src/inject/inject.js"
]
}
]
}
приложение. js
document.getElementById("automate-form").onsubmit = (event) => {
event.preventDefault();
chrome.tabs.create({ url: "https://www.instagram.com/" });
chrome.runtime.sendMessage({
action: 'fillFields'
});
console.log("console log");
};
broswer_action. html
<!doctype html>
<style type="text/css">
#mainPopup {
padding: 10px;
height: 200px;
width: 400px;
font-family: Helvetica, Ubuntu, Arial, sans-serif;
}
h1 {
font-size: 2em;
}
</style>
<div id="mainPopup">
<h1>
instabot
</h1>
<form id="automate-form">
<input type="text" id="hashtag" placeholder="#hastag">
<input type="submit" value="start liking">
<script src="app.js"></script>
</form>
</div>
вводить. js
chrome.extension.sendMessage({}, function(response) {
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
console.log("inject.js console log");
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === "fillFields") {
console.log("it works till here");
setTimeout(() => {
document.getElementsByClassName("_2hvTZ pexuQ zyHYP")[0].value = "username";
document.getElementsByClassName("_2hvTZ pexuQ zyHYP")[1].value = "password";
}, 3000);
}
});
}
}, 10);
});
Пожалуйста, спросите, нужно ли мне предоставить что-нибудь еще. У меня перелом позвоночника, поэтому я не могу часами сидеть за компьютером, поэтому я подумал о том, чтобы практиковать basi c extension.