У меня есть форма в popup.html, так что пользователь сможет использовать функцию расширения только после входа в систему. Однако я получаю следующую ошибку
Не проверено runtime.lastError во время работыtabs.executeScript: не удалось загрузить файл: «content.js».at getPageDetails
Это может быть причиной того, что функция входа в систему не может быть реализована, потому что я утешил эту функцию, но она не отображается.
Вот код
popup.html
<body>
<div class="container-fluid wrapper">
<div class="row center">
<form id="login">
<div class="form-group">
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" id="login" class="btn btn-primary">Login</button>
<span id="status-display"></span>
</form>
</div>
</div>
</div>
<script src="../js/popup.js"></script>
</body>
</html>
popup.js
// This callback function is called when the content script has been
// injected and returned its results
function onPageDetailsReceived(pageDetails) {
document.getElementById('email').value = pageDetails.email;
document.getElementById('password').value = pageDetails.password;
}
// Global reference to the status display SPAN
var statusDisplay = null;
// POST the data to the server using XMLHttpRequest
function Login() {
// Cancel the form submit
event.preventDefault();
// The URL to POST our data to
var postUrl = 'http://127.0.0.1:3008/users/sign_in';
// Prepare the data to be POSTed by URLEncoding each field's contents
var email = document.getElementById('email');
var password = document.getElementById('password');
var body = {
email: email,
password: password
}
const headers = new Headers();
headers.append('Content-Type', 'application/json');
console.log('apiurl', postUrl, headers, body)
fetch(postUrl, {
method: 'POST',
headers:headers,
data: data
})
.then(function(response){
console.log('respnse ------>', response)
return response.json()
})
.then(function(data){
console.log('data ------->', data)
})
.catch(function(err){
console.log('err ---->', err)
})
}
// When the popup HTML has loaded
window.addEventListener('load', function(evt) {
// Cache a reference to the status display SPAN
statusDisplay = document.getElementById('status-display');
console.log('document', document.getElementById('login'))
document.getElementById('login')
.addEventListener('submit', Login);
// Get the event page
chrome.runtime.getBackgroundPage(function(eventPage) {
// Call the getPageInfo function in the event page, passing in
// our onPageDetailsReceived function as the callback. This
// injects content.js into the current tab's HTML
eventPage.getPageDetails(onPageDetailsReceived);
});
});
eventPage.js
// This function is called onload in the popup code
function getPageDetails(callback) {
// Inject the content script into the current page
chrome.tabs.executeScript(null, { file: 'content.js' }); // could not find it says
// When a message is received from the content script
chrome.runtime.onMessage.addListener(function(message) {
// Call the callback function i.e onPageDetailsReceived in our case
callback(message);
});
};
Примечание: popup.js, eventPage.js, background.js все в одном месте
мой файл манифеста выглядит такследующий
"permissions": [
"activeTab",
"storage",
"contextMenus",
"http://*/*",
"https://*/*"
],
"options_page": "html/popup.html",
"background": {
"scripts": ["js/eventPage.js", "js/background.js"],
"persistent": false
},
"content_scripts": [
{
"matches" : [
"http://*/*", "https://*/*"
],
"js" : [
"js/content.js"
]
}
],