I'm trying to add google analytics in a chrome extension and I'm not succeeding.
Most of the guides are for the v2 manifest and the extension I'm working on is v3.
I've already tried copying and pasting the scripts that analytics recommends to me.
I've tried to put the CSP in the manifest but it crashes when using the url in the script-src, I get an unsafe url error.
https://i.stack.imgur.com/NDvi5.png
I've tried copying the entire gtag.js code into a fullScript.js file and calling it through the analytics.js file but it didn't work either.
https://i.stack.imgur.com/ZrlOY.png
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script',chrome.runtime.getURL('fullScript.js'),'ga');
ga('create', 'G-XXXXXXXX', 'auto');
ga('send', 'pageview');
I've already tried using tb button click event script which tb didn't have any reaction.
function trackButton(e) {
_gaq.push(['_trackEvent', e.target.id, 'clicked']);
};
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', trackButtonClick);
}
I tried to load the scripts from both the manifest and the popup.html and none of them worked:
popup.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TESTE</title>
<script src='analytics.js'></script>
</head>
<body>
<h1>TESTE</h1>
<button id="my-button">TESTE</button>
</body>
</html>
Manifest V3:
{
"manifest_version": 3,
"name": "Hello World",
"description": "Teste",
"version": "1.0",
"action": {
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["/analytics.js"]
}
],
"web_accessible_resources": [
{
"resources": ["analytics.js"],
"matches": ["<all_urls>"]
},
{
"resources": ["fullScript.js"],
"matches": ["<all_urls>"]
}
],
"content_security_policy": {
"extension_pages": "script-src 'self' https://www.googletagmanager.com/gtag/js; object-src 'self'; script-src-elem 'self'"
},
"permissions":["tabs", "scripting"]
}
Related
In an extension I'm developing, I set the manifest without the popup page, so that when you click the icon of the app in the browser's toolbar it immediately opens the app's page.
The app's page is index.html and in this page I load the
<script src="background.js"></script> & <script src="./index.js"></script>
The background.js file has the following code to open the index.html page after the click:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.create(
{
active: true,
url: "index.html",
},
null
);
});
also tested with: chrome.tabs.create({ url: chrome.extension.getURL("index.html") }); , but same issue occurs.
The manifest.json file:
"background": {
"page": "index.html",
"persistent": false
},
"browser_action": {
"browser_style": true,
"default_icon": {
"16": "images/icon16.png"
}
},
When I first click the icon, it opens the index.html, ... , but the second time I click the icon it opens 2 index.html files, if I click it again then it opens 4, and so on. It's ok to open another index.html, but just one for each icon click.
What would be the mistake I'm doing?
Thanks in advance, Ken
Try this.
manifest.json
{
"name": "Test",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": [
"./background.js"
]
},
"permissions": [
"tabs"
],
"browser_action": {
}
}
background.js
chrome.browserAction.onClicked.addListener((tab) => {
chrome.tabs.create({
url: chrome.runtime.getURL("./page.html")
});
});
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>extension page</title>
</head>
<body>
<h2>Extension Page</h2>
</body>
</html>
When I try to compress an extension I'm creating for Google Chrome, I get the message below (in portuguese, can't find it in English):
Erro de extensão de pacote (Pack extension error)
Falha ao emitir a chave privada. (Failed to output private key)
I can "Load unpacked" and run it perfectly..
Code bellow:
popup.html:
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
<script type='text/javascript' src='./jquery.min.js'></script>
<script type='text/javascript' src='./scripts.js'></script>
</html>
scripts.js:
$(document).ready(function () {
if ($('.LoginScreen').length > 0) {
$("#username").val("usuarioteste");
$("#password").val("senhateste");
$("form[name='loginForm'] .DwtButton").click();
}
});
manifest.json:
{
"name": "Auto Complete Zimbra",
"version": "1.1",
"description": "Extensão para autocompletar e logar automaticamente no Zimbra!",
"manifest_version": 2,
"browser_action": {
"default_icon": "favicon.ico",
"default_popup": "popup.html"
},
"permissions": [
"*://*.meusite.com.br/*"
],
"content_scripts": [
{
"matches": [
"*://*.meusite.com.br/*"
],
"js": [
"jquery.min.js",
"scripts.js"
]
}
]
}
Chrome tries to create a private key file adjacent to the extension directory. In your case that would be C:\extensao.pem (and the extension itself wants to go to C:\extensao.crx). The default permissions on Windows allow creating directories but not files at the root of the C drive.
Move your extension folder somewhere else.
So I've had enough of this one page, I always have to check a checkbox if I want to send a private message, and when I send a message, I want it to be private always. So I decided to try making a google chrome extension about it. So I've created the default files, manifest.json, and popup.html, but I can't get it working.
What am I doing wrong?
Manifest.json:
{
"name": "xxx",
"version": "1.0",
"manifest_version": 2,
"description": "Automaattinen yksityiskommentointi.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
popup.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XXX</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
Moi
</body>
</html>
and script.js:
$(document).ready(function(){
$('.private-checkbox').prop('checked', true);
});
It would be too easy, right? I bet that this would only check the checkbox on the popup, but I want to check checkboxed in the tabs I open.
It worked for me with following change in popup.html
Download jquery.min.js and add it in your package as shown
Use
<script src="jquery.min.js"></script>
instead of
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Only local script and and object resources are loaded
Script and object resources can only be loaded from the extension's package, not from the web at large. This ensures that your extension only executes the code you've specifically approved, preventing an active network attacker from maliciously redirecting your request for a resource.
Updated Manifest.json
{
"name": "xxx",
"version": "1.0",
"manifest_version": 2,
"description": "Automaattinen yksityiskommentointi.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://www.facebook.com/*"],
"js": ["jquery.min.js","myscript.js"]
}
]
}
myscript.js
$(document).ready(function(){
$('.private-checkbox').prop('checked', true);
});
I want to create an extension that reacts to a click that searches for all the <ul>'s in the page, and surround them with a border. The problem is that the code doesn't work, and clicking on the extension icon doesn't search for anything.
mainfest.json:
{
"name": "My First Extension",
"version": "1.0",
"background_page": "background1.html" ,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs", "http://*/*","https://*/*"
]
}
background1.html:
<!doctype html>
<html>
<head>
<title>Background Page</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script>
function ul_checker(){
$('ul').addClass('ul_style');
$('ul').append('<div class="close">X</div>');
$('.close').addClass('style2');
}
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{code:"ul_checker()"});
});
</script>
</head>
<body>
</body>
</html>
Your extension is of type content script. You will have to specify what scripts will run on the page, see the manifest and description of the official documentation. I assume that you will have to include jquery as a content script :).
Therefore, accordingly to the documentation you will have to add the following in your manifest.json:
"content_scripts": [
{
"js": ["js/jquery-1.3.2.min.js"]
}
],
I am creating a Google Chrome extension and want to populate a form field on a page.
I am trying something like this with no effect:
chrome.tabs.executeScript(null,
{code:"document.body.form[0].email_field='" + email + "'"});
}
You should make sure you have the "tabs" permission in your manifest.json:
{
"name": "123 Testing",
"version": "0.1",
"description": ":-)",
"browser_action": {
//"default_icon": "my_icon.png",
"default_title": "Click to fill the form"
},
"background_page": "background.html",
"permissions": [
"tabs",
"http://*/"
]
}
I believe you should access forms with document.forms and not document.body.form.
See my background.html file, and test it with google.com:
<html>
<head>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {
code: "document.forms[0]['q'].value='Hello World!'"
})
});
</script>
</head>
<body></body>
</html>
(I would have usually used document.getElementById).
Good luck!