I'm trying to build an extension to monitor the xhr portion of the devtools network tab. With some help , I have been able to get the requests to be displayed on the service-worker console and I can log the Post requests. I'm also now saving the data "point" in chrome.storage. My next step is to read the data from chrome.storage.local, and have the content script log it to the console. However although I am getting no errors, I don't see any output in the console. No errors seen though. What am I doing wrong?
manifest.json:
{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": ["*://*.cnn.com/"],
"permissions": ["webRequest", "activeTab","tabs"],
"content_scripts": [
{
"matches": ["*://cnn.com/*"],
"js": ["popup.js"]
}
]
}
In my background.js:
(function () {
var point;
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
// Use this to decode the body of your post
const postedString = decodeURIComponent(String.fromCharCode.apply(null,
new Uint8Array(details.requestBody.raw[0].bytes)));
console.log(postedString)
const body = JSON.parse(postedString);
point = body.CenterPoint.Point;
console.log(point);
chrome.storage.local.set({ 'key': point }, function () {
console.log('Value is set to ' + point);
});
},
{ urls: [url] },
["requestBody"]
);
})();
popup.js:
chrome.storage.onChanged.addListener(function (changes, namespace) {
for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
console.log(
`Storage key "${key}" in namespace "${namespace}" changed.`,
`Old value was "${oldValue}", new value is "${newValue}".`
);
}
});
Related
I'm trying to build an extension to monitor the xhr portion of the devtools network tab. With some help , I have been able to get the requests to be displayed on the service-worker console and I can log the Post requests. My next step is to send some data to chrome.storage.local, so it can be read later by a content script. However although I am getting
console.log(point);
outputted in the service worker console, I am not seeing any output in either console containing:
console.log('Value is set to ' + point)
No errors seen though. What am I doing wrong?
manifest.json:
{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": ["*://*.cnn.com/", "],
"permissions": ["webRequest", "activeTab","tabs"],
"content_scripts": [
{
"matches": ["*://cnn.com/*"],
"js": ["contentScript.js"]
}
]
}
In my background.js:
(function () {
var point;
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
// Use this to decode the body of your post
const postedString = decodeURIComponent(String.fromCharCode.apply(null,
new Uint8Array(details.requestBody.raw[0].bytes)));
console.log(postedString)
const body = JSON.parse(postedString);
point = body.CenterPoint.Point;
console.log(point);
},
{ urls: [url] },
["requestBody"]
);
chrome.storage.local.set({ 'key': point }, function () {
console.log('Value is set to ' + point);
});
})();
Based on comments I have the following working code:
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
// Use this to decode the body of your post
const postedString = decodeURIComponent(String.fromCharCode.apply(null,
new Uint8Array(details.requestBody.raw[0].bytes)));
console.log(postedString)
const body = JSON.parse(postedString);
point = body.CenterPoint.Point;
console.log(point);
chrome.storage.local.set({ 'key': point }, function () {
console.log('Value is set to ' + point);
});
},
{ urls: [url] },
["requestBody"]
);
I'm trying to build an extension to monitor the xhr portion of the devtools network tab. With some help , I have been able to get the requests to be displayed on the service-worker console and I can log the Post requests. My next step is to send some post info to the extension popup. However I am getting:
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
manifest.json:
{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": ["*://*.cnn.com/", "],
"permissions": ["webRequest", "activeTab","tabs"],
"content_scripts": [
{
"matches": ["*://cnn.com/*"],
"js": ["contentScript.js"]
}
]
}
In my background.js:
(function () {
var tab
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
tab = tabs[0];
console.log(tab);
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
// Use this to decode the body of your post
const postedString = decodeURIComponent(String.fromCharCode.apply(null,
new Uint8Array(details.requestBody.raw[0].bytes)));
console.log(postedString)
const body = JSON.parse(postedString);
console.log(body.CenterPoint.Point);
},
{ urls: [url] },
["requestBody"]
);
console.log(tab);
chrome.tabs.sendMessage(tab.id, "your message")
});
}());
My content script is:
console.log("Hi from content script");
chrome.runtime.onMessage.addListener(function (response, sendResponse) {
console.log(response);
});
How do I fix this?
I have used this page Cross-domain XMLHttpRequest using background pages to create a simple extension but I get following errors.
Unchecked runtime.lastError: The message port closed before a response was received.
I used this sample extension then added the contents https://github.com/SimGus/chrome-extension-v3-starter
forground.js
chrome.runtime.sendMessage({
method: 'POST',
action: 'xhttp',
url: 'https://www.stackoverflow.com/search',
data: 'q=something'
}, function (responseText) {
console.log(responseText);
});
service-worker.js
chrome.runtime.onMessage.addListener(function (request, sender, callback) {
if (request.action == "xhttp") {
var xhttp = new XMLHttpRequest();
var method = request.method ? request.method.toUpperCase() : 'GET';
xhttp.onload = function () {
callback(xhttp.responseText);
};
xhttp.onerror = function () {
// Do whatever you want on error. Don't forget to invoke the
// callback to clean up the communication port.
callback();
};
xhttp.open(method, request.url, true);
if (method == 'POST') {
xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhttp.send(request.data);
return true; // prevents the callback from being called too early on return
}
});
manifest.json
{
"manifest_version": 3,
"name": "Chrome Extension v3 Starter",
"description": "A minimal example of a chrome extension using manifest v3",
"version": "0.0.1",
"icons": {
"16": "logo/logo-16.png",
"48": "logo/logo-48.png",
"128": "logo/logo-128.png"
},
"options_page": "settings/settings.html",
"action": {
"default_title": "Chrome Addon v3 Starter",
"default_popup": "popup/popup.html"
},
"permissions": [
"https://www.stackoverflow.com/search"
],
"host_permissions": [
"*://*/*"
],
"background": {
"service_worker": "service-worker.js"
},
"content_scripts": [{
"js": ["foreground.js"],
"matches": [ "http://*/*", "https://*/*" ]
}]
}
I am new to Chrome Extensions and I unable to find how to inject content.js to a specific URL only? I want the user to give me a specific URL and then inject the content.js to that specific URL. As of right now, my content script is being injected in all URLs. I am guessing there is something wrong in my Manifest.json or background.js or both since I am not sure if I used the executeScript function correct.
Right now I am only designing my code to not inject content.js to google.com but once I know the solution to this problem then it would be designed to specific URLs. I would appreciate any help, thank you.
manifest.json
{
"name": "Chrome Extension",
"description": "Test Chrome Extension",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting", "tabs"],
"content_scripts": [
{
"all_frames" : false,
"matches": ["http://*/", "https://*/*"],
"js": ["contentscript.js"],
"css": ["contentscript.css"],
"run_at": "document_end"
}
],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/16x16.png",
"32": "/images/32x32.png",
"48": "/images/48x48.png",
"128": "/images/128x128.png"
}
},
"icons": {
"16": "/images/16x16.png",
"32": "/images/32x32.png",
"48": "/images/48x48.png",
"128": "/images/128x128.png"
},
"host_permissions": ["http://*/", "https://*/*"],
"options_page": "options.html"
}
background.js
// keep track of the URL when user changes URL in current tab
try {
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (changeInfo.status == "complete") {
let testURL = new URL(tab.url);
// not allowed to inject content.js on chrome://
// testing to see if my content.js will not be injected to google.com but it still is
if (!testURL.origin.includes('chrome') && !tab.url.includes('google')) {
if (changeInfo.status == 'complete') {
chrome.scripting.executeScript({
files: ['contentscript.js'],
target: {tabId: tab.id}
});
console.log(testURL.hostname);
}
} else {
console.log('Invalid URL onUpdated');
}
}
});
} catch (e) {
console.log(e);
}
// when user changes to a different tab, get URL of that tab
try {
chrome.tabs.onActivated.addListener(function(activeInfo) {
getCurrentTab();
} catch (e) {
console.log(e);
}
function getCurrentTab() {
chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
let url = tabs[0].url;
let tab_Id = tabs[0].id;
try {
let urlConstr = new URL(url);
if (!urlConstr.origin.includes('chrome') && !url.includes('google')) {
chrome.scripting.executeScript({
files: ['contentscript.js'],
target: {tabId: tab_Id}
});
console.log('changed content here');
} else {
console.log('chrome website or google.com, don't inject content.js nothing');
}
} catch(e) {
console.log('ERROR HAPPENED - ' + e);
}
});
}
I'm trying to write an extension to delete some URLs from my history when they are navigated to. Here are the relevant files -
manifest.json
{
"manifest_version": 2,
"name": "Secret",
"description": "Browser History Edits.",
"version": "0.1",
"browser_action": {
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"webNavigation",
"history",
"tabs"
]
}
background.js
var prevent_logging_keywords = ["reddit", "stackoverflow"]
chrome.webNavigation.onBeforeNavigate.addListener(function(details) {
var currentUrl = details.url;
prevent_logging_keywords.forEach(function(keyword) {
if (currentUrl.includes(keyword)) {
console.log(currentUrl);
chrome.history.deleteUrl({ "url": currentUrl}, function(){});
}
});
});
However, this does not work. The URL still shows up in my history and, what's more, the console.log is also never called. What am I doing wrong?