I'm trying to intercept youtube requests response from a devtool panel and send it to the content or background script of a Chrome extension. but I can't get it to work.
There is loads of exemple online but most of them use Manifest V2 and I really want to make it work on V3.
I don't know which method to use for sending messages to the content or background script from the panel.js, nor do I know how to listen for incoming messages from the panel in those scripts.
And I don't know if I need to add more permissions in my manifest for this to work :
{
"manifest_version": 3,
"name": "Already Seen",
"version": "1",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-3.6.0.min.js", "content.js"],
"css": ["avatar.css"]
}
],
"devtools_page" : "devtools.html",
"action": {
"default_icon": "icon.png"
},
"background": {
"service_worker": "background.js"
},
"permissions": ["identity", "storage", "tabs", "webRequest"],
"host_permissions": ["https://www.youtube.com/", "https://youtube.com/"],
"externally_connectable": {
"matches": ["https://youtube.com/*"]
},
"oauth2": {
"client_id": "***************",
"scopes": [
"https://www.googleapis.com/auth/userinfo.email",
"https://www.googleapis.com/auth/userinfo.profile"
]
}
}
devtools.html
<script src="devtools.js"></script>
devtools.js
chrome.devtools.panels.create("Already Seen", "icon.png", 'panel.html');
panel.html
<html>
<body>
<script src="panel.js"></script>
</body>
</html>
panel.js
chrome.devtools.network.onRequestFinished.addListener((request) => {
request.getContent((body) => {
if (!request.request || !request.request.url) return;
// I NEED TO SEND THE MESSAGE HERE TO BACKGROUND.JS OR CONTENT.JS
});
});
I found another way of doing this by using the chrome.debbuger in the background script but it shows "... started debugging this browser" on top of every pages.
Related
I'd like to develop a chrome extension and add my custom CSS and JS;
I have these Two files:
manifest.json
{
"name": "Block request",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content_script.js"]
}],
"permissions": [
"webRequest",
"webRequestBlocking",
"<all_urls>"
]
}
content_script.js
if (window.location.hostname = "w3schools.com") {
alert("Hello");
console.log("Hi console");
}
I added this extension to the Chrome, but when I refresh every page I got alert message;
How can I solve this issue?
Is my coding correct?
EDIT
My chrome extension calling an api service in the background.js file and i can get the data. But after closing the browser window, i cant get the data from the api service in background.js file. It showing null value. When go to the chrome://extensions/ and reload the extension I can get the data.
When close the browser window, the data fetched is being reset and when open the browser, data not fetching. Data can be fetched from the api only after reloading the extension.
Why happening so. Does any one have an idea about this?
This is my manifest.json file
{
"manifest_version": 2,
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"name": "Test",
"short_name": "Test",
"description": "Test",
"version": "3.0.0",
"background": {
"scripts": [
"build/background-bundle.js"
]
},
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"cookies",
"storage",
"activeTab",
"http://*/",
"https://*/"
],
"content_scripts": [{
"matches": [
"<all_urls>"
],
"js": [
"build/content-bundle.js"
],
"run_at": "document_end"
}],
"options_ui": {
"page": "options.html",
"chrome_style": true
},
"content_security_policy": "script-src 'self' https://www.google-analytics.com/analytics.js https://api.algorithmia.com/v1/algo/algo://nlp/SummarizeURL/0.1.1; object-src 'self'"
}
You can't reload the background file based on anything other than reopening the browser or reloading the extension manually. What you should instead do is have a content script tell background.js to run getTaxonomyList again when the user log in happens.
background.js:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.userLoggedIn) {
getTaxonomyList().done(function(list) {
sendResponse(list);
});
}
})
I am building a Chrome extension that injects some HTML and JS when the user clicks the extension icon. So, when the icon is clicked, it is registered in the bg script, and the content script is notified about this like so:
Background script
chrome.browserAction.onClicked.addListener(iconClicked)
function iconClicked(tab) {
var visitors = window.AllVisitors.get(tab.id),
data = {
message: 'toggleMenu',
user: window.user
};
chrome.tabs.sendMessage(tab.id, data);
}
Now, to the problem: In my manifest file, I have also added a custom page for the chrome://newtab page. When the extension icon is clicked while visiting this custom newtab page, the content script does not receive any message what so ever. The default newtab page does actually receive the message as well as any other webpage.
I am thinking that maybe it has something to do with externally_connectable, but adding this does not help:
"externally_connectable": {
"matches": ["chrome://newtab/"],
}
Does anybody know why my custom newtab page does not receive any messages from the background script? Any help is very appreciated!
Manifest file:
{
"manifest_version": 2,
"name": "Orbit",
"version": "0.0.1",
"web_accessible_resources": [
"templates.html",
"img/icon48.png",
"fonts/*.woff",
"img/*"
],
"externally_connectable": {
"matches": ["chrome://newtab/"],
},
"chrome_url_overrides" : {
"newtab": "tab/newtab.html"
},
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"browser_action": {
"default_icon": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"default_title": "Orbit"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["vendor/chrome-promise.js", "vendor/jquery.js", "vendor/underscore.js", "vendor/backbone.js", "orbit.js"]
},
{
"matches": ["<all_urls>"],
"css": ["sidebar.css"]
}
],
"background": {
"scripts": ["vendor/socket.io.js", "vendor/jquery.js", "vendor/underscore.js", "vendor/backbone.js", "vendor/chrome-promise.js", "vendor/jquery.js", "eventPage.js"],
"persistent": true
},
"permissions": [
"http://fonts.googleapis.com/*",
"https://fonts.googleapis.com/*",
"https://get-orbit.com:8080/*",
"activeTab",
"tabs",
"storage"
]
}
Content scripts aren't injected on chrome-extension:// pages.
Simply add the script manually in your newtab.html:
<html>
<head>
<script src="your-content-script.js"></script>
</head>
I am trying to use jquery to make a post ajax call and I have tried almost all the solutions on SO but none seem to work. My manifest is:
{"name": "__MSG_extName__",
"version": "0.1",
"manifest_version": 2,
"description": "__MSG_extDesc__",
"icons": {"16": "icon16.png", "128": "icon128.png"},
"background": {"persistent": false, "scripts": ["background.js"]},
"default_locale": "en",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-2.1.3.js"]
}
],
"permissions": ["contextMenus", "downloads", "downloads.open", "tabs", "http://*/*", "https://*/*"]}
The background.js file is like:
chrome.downloads.onCreated.addListener(function(downloadItem) {
console.log("Download Link is " + downloadItem.url)
chrome.tabs.executeScript(null, { file: "jquery-2.1.3.js" }, function() {
console.log("jquery is loaded");
var linkSync = {
"document": {
"downloadLink": downloadItem.url,
"isSynced": false},
"safe": true
};
$.post("url/to/post",
linkSync,
function( data ) {
console.log("Success" + data );
});
});
});
The error that I am getting is:
Download Link is http://www.mymp3song.com/files/download/id/33724
background.js:14 jquery is loaded
extensions::uncaught_exception_handler:8 Error in response to tabs.executeScript: ReferenceError: $ is not defined
at Object.callback (chrome-extension://kbhkaajolcelehoonafmkgaahfgphnok/background.js:22:2)
at chrome-extension://kbhkaajolcelehoonafmkgaahfgphnok/background.js:13:16
As you may see, I have added the jquery.js both programmatically and in the manifest but none seem to work. Even if I remove either of them it does not work. Can someone point to me what I should do to make it work?
If you want jQuery to function in your background page, you need to add it to the background page.
Both methods that you're trying to use are adding code to the content script context instead.
What you need is this:
"background": {
"persistent": false,
"scripts": ["jquery-2.1.3.js", "background.js"]
},
to load jQuery in your background page. Note that order matters.
I would recommend giving the Architecture Overview a look.
modify your your json to this and it will work for u
reference is Here
"content_scripts": [ {
"js": [ "jquery.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
I'd like to make a website that is not part of the chrome plugin but rather just uses some API that the plugin exposes to it. Is this possible and if so, how do I do it? I googled this question and was unable to find anything.
I'm trying to use content scripts but nothing happens. Can someone explain what's wrong here?
manifest.json
{
"manifest_version": 2,
"name": "Hello World Extension",
"description": "This extension prints hello world.",
"version": "1.0",
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "img/icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://locahost:8888/*"],
"js": ["EmotivAPI.js"]
}
]
}
EmotivAPI.js
var port = chrome.runtime.connect();
console.log("Hello?");
window.addEventListener("message", function (event) {
// We only accept messages from ourselves
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
console.log("Content script received: " + event.data.text);
port.postMessage(event.data.text);
alert("recieved!");
}
}, false);
js in the webpage
window.sayHello = function () {
window.postMessage({ type: "FROM_PAGE", text: "Hello from webpage!" }, "*");
}
console.log('Emotiv extension loaded.');
}
I'm calling window.sayHello() from the console
Content Scripts can help you in this case.
The content script will be injected into a page:
"content_scripts": [
{
"matches": ["http://www.google.com/*"], // try with "http://localhost:*/*" or "http://localhost:*"
"css": ["mystyles.css"],
"js": ["content_script.js"]
}
]
If you want to inject the code only sometimes, use the permissions field instead
/* in manifest.json */
"permissions": [
"tabs", "http://*/*"
],
In you extension html file, you can then execute the script by:
chrome.tabs.executeScript(null, {file: "content_script.js"});