When I write a extension for google chrome I got error as title question. Below is my code:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript(null, {
file: "libs/jquery.js"
}, function () {
chrome.tabs.executeScript(null, {
file: "src/content.js"
});
});
});
chrome.app.window.onBoundsChanged.addListener(function (tab) {
chrome.tabs.executeScript(null, {
file: "libs/jquery.js"
}, function () {
chrome.tabs.executeScript(null, {
file: "src/content.js"
});
});
});
Firstly, I got success with onClicked event. But I want extension work when I resized window. But when I add 2nd event. Error occur
Please help me this error
Thank you
manifest.json
{
"name": "Bootstrap Grid for any Website",
"version": "1.1.0",
"manifest_version": 2,
"description": "Quickly toggle a Bootstrap Grid for any website. Easy to use, easy success.",
"browser_action": {
"default_icon": "src/icon48.png"
},
"background" : {
"scripts" : [
"src/background.js"
]
},
"content_scripts": [
{
"js": [ "src/send_value.js" ],
"matches": [ "<all_urls>" ],
"all_frames": true,
"run_at": "document_end"
}
],
"permissions": ["activeTab"]
}
I think you've mixed up chrome extensions and chrome apps. As we can read here, chrome.app.window is
not associated with any Chrome browser windows
I recommend you create content.js script where you put something like this:
window.addEventListener('resize', function(e){
....
// here you send message to background.js
var message = { info: "window resized");
chrome.runtime.sendMessage( "", message );
})
content.js must be executed in every tab you specified in manifest file.
In your background.js you should write:
chrome.runtime.onMessage.addListener(function(message){
if(message.info === "window resized"){
chrome.tabs.executeScript(null, // ..... the stuff you've written above
......
}
});
Links:
chrome.runtime.sendMessage
chrome.runtime.onMessage
Good luck!
UPD (in manifest file):
"background": {
"scripts": [ "background.js"]
},
"content_scripts": [
{
"js": [ "content.js" ],
"matches": [ "<all_urls>" ],
"all_frames": true,
"run_at": "document_end"
}
],
UPD 2. This snippet is from my working extension manifest:
"web_accessible_resources": [
"main.js",
"style.css",
"options/options.css",
"options/options.js"
]
Your extension folder look like:
Your manifest.json file:
{
"name": "Bootstrap Grid for any Website",
"version": "1.1.0",
"manifest_version": 2,
"description": "Quickly toggle a Bootstrap Grid for any website. Easy to use, easy success.",
"browser_action": {
"default_icon": "src/icon48.png"
},
"background" : {
"scripts" : [
"background.js"
]
},
"permissions": [
"tabs",
"<all_urls>"
],
"web_accessible_resources":[
"src/content",
"src/content_temp",
"libs/jquery.js"
]
}
background.js:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript(null, {
file: "libs/jquery.js"
}, function () {
chrome.tabs.executeScript(null, {
file: "src/content.js"
});
});
});
chrome.runtime.onMessage.addListener(function(message){
if(message.info !== 1) return;
chrome.tabs.executeScript(null, {
file: "src/content_temp.js"
});
});
And your send_value.js file I put into content.js:
window.addEventListener('resize', function (e) {
// here you send message to background.js
var message = {info: 1}
chrome.runtime.sendMessage("", message);
});
function devTool() {
As for me, it works fine! :-)
Related
In background js:
chrome.tabs.onActivated.addListener((activeInfo)=>{
var tabId=activeInfo.tabId;
console.log("tab switched: "+tabId);
chrome.tabs.get(tabId,(tab)=>{
console.log("getTabById: "+tab);
});
chrome.tabs.getSelected(null, function(tab) {
console.log("getTabByUsingSelected: "+tab);
});
chrome.tabs.query({"active":true,"currentWindow":true,'lastFocusedWindow': true}, (tabs)=>{
if (chrome.runtime.lastError) {
}else{
if(tabs!==undefined){
console.log("getTabByQuery: "+tabs[0].url);
}
}
});
});
Manifest:
"manifest_version":2
"permissions":[
"storage",
"activeTab",
"tabs",
"<all_urls>"
],
"background":{
"scripts": ["background.js"]
},
The response is always undefined when I am not using a query. Query is working only first time
I am buidng a chrome app to click a element after pageloaded :
manifest.json:
{
"manifest_version": 2,
"name": "click chapter-btn",
"version": "1.0",
"browser_action":{ },
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"storage",
"https://www.youtube.com/*"
],
"content_scripts": [
{
"matches": ["https://www.youtube.com/*"],
"all_frames": true,
"js": ["contentScript.js"]
}
]
}
contentscript.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(document.readyState !== 'complete') {
window.addEventListener('load',afterWindowLoaded);
} else {
afterWindowLoaded();
}
function afterWindowLoaded(){
setTimeout(()=>{
var btn = document.querySelector('.ytp-chapter-title-prefix')
btn?.click()
},3000)
}
return true
});
background.js:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo && changeInfo.status == "complete"){
if(!tab.url.includes('https://www.youtube.com/watch')){
return
}
chrome.tabs.sendMessage(tabId, {data: tab}, function(response) {});
}
});
I searched some solutions in internet, 'add "return true" to chrome.runtime.onmessage listener',but still show this error, Dont know what to do.
I want to send message from Popup.js into Content script by this code:
popup.js
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, { xpath: xpath });
});
And Receive it in Content Script by this code:
content.js
chrome.runtime.onMessage.addListener(gotMessage());
function gotMessage(request, sender, sendResponse) {
alert("Hello");
}
My Manifest is:
manifest.json
{
"manifest_version": 2,
"name": "Auto Clicker",
"description": "Set Time, Set Element to Click, Start!",
"version": "0.1",
"permissions": ["tabs", "<all_urls>"],
"browser_action": {
"default_icon": {
"16": "images/icon-16x16.png",
"24": "images/icon-24x24.png",
"32": "images/icon-32x32.png"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"default_title": "Auto Clicker",
"default_popup": "popup.html"
},
"icons": {
"16": "images/icon-16x16.png",
"24": "images/icon-24x24.png",
"32": "images/icon-32x32.png",
"128": "images/icon-128x128.png"
}
}
Why it is not Working? the messages is'nt send to the Content script.
My issue is solved in this way:
// Inject Trigger to the current active Web Page
function injectTheScript() {
let xpath = document.getElementById("xpath-input").value || "";
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.executeScript({
code: `
(function () {
let btn = new XPathEvaluator()
.createExpression("${xpath}")
.evaluate(document, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue;
btn.click();
})();
`
});
});
}
sync is not defined" error showing in chrome extension while have used storage permission.please acknowledge me where is error and how
will solve message : "sync is not defined" stack : "ReferenceError:
sync is not defined↵ at eval (eval at
(http://localhost:46950/app/popup.js:31:9), :1:1)↵ at
HTMLInputElement.
(http://localhost:46950/app/popup.js:31:9)↵ at
HTMLInputElement.dispatch
(http://localhost:46950/app/img/jquery-3.2.1.min.js:6:12417)↵ at
HTMLInputElement.q.handle
//manifest.json
{
"manifest_version": 2,
"name": "One-click ",
"description": "This extension demonstrates a browser .",
"version": "1.0",
"app": {
"launch": {
"local_path": "popup.html"
}
},
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": [ "popup.js", "img/jquery-3.2.1.min.js" ],
"persistent": false
},
"content_scripts": [
{
"css": [ "img/bootstrap.min.css"],
"js": [ "app/popup.js", "img/jquery-3.2.1.min.js" ],
"matches": [ "http://*/*", "https://*/*" ]
}
],
"permissions": [
"activeTab",
"storage",
"tabs",
"identity"
]
}
//popup.js
chrome.storage.sync.set({ 'data':"helloset" }, function () {
alert("saved");
});
*method* is not defined errors usually means the method was being called while the library wasn't yet loaded or there's really no such method. In your case, I think it's the former. Looking at the IzumiSy/manifest.json sync example, you need to use document.body.onload first then call that function like:
// popup.js
document.body.onload = function() {
chrome.storage.sync.get("data", function(items) {
if (!chrome.runtime.error) {
console.log(items);
document.getElementById("data").innerText = items.data;
}
});
}
if you need to save data locally you can use
document.body.onload = function() {
chrome.storage.sync.get("data", function(items) {
if (!chrome.runtime.error) {
console.log(items);
document.getElementById("data").innerText = items.data;
}
});
}
document.getElementById("set").onclick = function() {
var d = document.getElementById("text").value;
chrome.storage.sync.set({ "data" : d }, function() {
if (chrome.runtime.error) {
console.log("Runtime error.");
}
});
window.close();
}
I have this code:
chrome.tabs.onUpdated.addListener(function(id, changes, tab)
{
if (changes.status != "complete") return false;
chrome.tabs.executeScript(id, {code: "alert('Page loaded.');"});
});
It's executes in debugger, but does not works. Why?
Try this exactly as defined here.
manifest.json
{
"manifest_version": 2,
"name": "Execute script app",
"version": "1.0",
"background": {
"persistent":true,
"page":"background.html"
},
"content_scripts": [{
"matches": ["http://*/*"],
"js": ["app.js"]
}
],
"permissions": [
"tabs",
"http://*/*"
]
}
background.html
<script src="background.js"></script>
background.js
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo && changeInfo.status == "complete"){
chrome.tabs.executeScript(tabId, {code: "alert('Page loaded.');"});
}
});
app.js
//well this is just empty since ur not doing anything here