I'm trying to fire a chrome notification ( in a chrome extension ) with the following code:
var opt = {
type: "basic",
title: "Deploy",
message: "It worked!",
iconUrl: "test.png"
};
chrome.notifications.create("", opt, function(id) {
//console.error(chrome.runtime.lastError);
});
But it shows me the following message :
"Unchecked runtime.lastError while running notifications.create: Unable to successfully use the provided image. "
My image "test.png" is in the root folder of my app( with the manifest.json file ), but I've tried to put the picture also in other folder of my app, it never worked!
I've correctly added the permission for notifications, so I really don't know where the problem is !
Any ideas ?
Thank you,
EDIT: I found the solution ! The image needed to be 80*80 !
Related
I'm trying to create a Chrome extension, so that I can read it's content when a page is loaded.
document.addEventListener("DOMContentLoaded", function(){
function modifyDOM() {
return "<html>\n".concat(String(document.body.innerHTML),"\n</html>");
}
chrome.tabs.executeScript({
code: '(' + modifyDOM + ')();'
}, (results) => {
let dat=String(results[0]);
console.log(dat);
});
});
But it gives me error saying :
Unchecked runtime.lastError: Cannot access a chrome:// URL
_generated_background_page.html:1 Error handling response: TypeError: Cannot read property '0' of undefined
But the code works fine, when I put the code inside :
chrome.browserAction.onClicked.addListener(function(tab) {
//this works only when I click on that extension icon
...
});
How can I resolve this ?
My code works when I click the button, but I wanted to check for page content change, as I couldn't find any API for that, I tried to do at-least when the page loads.
Since I cannot comment on other posts yet I had to write this in an answer,
check the answer to this question chrome.tabs.executeScript: Cannot access a chrome:// URL
Here's what was said:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
//code in here will run every time a user goes onto a new tab, so you can insert your scripts into every new tab
});
I am currently running with Chrome 74 and trying to use Cypress to test a style-guide in my app. When I load up Cypress it throws this error:
SecurityError: Blocked a frame with origin "http://localhost:3000"
from accessing a cross-origin frame.
Please let me know if there is a solution to this!
I had tried to follow along with this:
https://github.com/cypress-io/cypress/issues/1951
But nothing has changed/worked for me. :(
My code is shown below: cypress/plugins/index.js
module.exports = (on, config) => {
on('before:browser:launch', (browser = {}, args) => {
// browser will look something like this
// {
// name: 'chrome',
// displayName: 'Chrome',
// version: '63.0.3239.108',
// path: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
// majorVersion: '63'
// }
if (browser.name === 'chrome') {
args.push('--disable-site-isolation-trials');
return args
}
if (browser.name === 'electron') {
args['fullscreen'] = true
// whatever you return here becomes the new args
return args
}
})
}
in my cypress/support/index.js
This will load the site before every test I run to save myself from having to write cy.visit in every test.
beforeEach(() =>{
cy.visit('http://localhost:3000/style-guide')
})
I had the very same issue yesterday and the answer from #jsjoeio in the cypress issue #1951 you've referenced in your question actually helped me.
So basically only thing I've done was to modify my cypress.json and add following value:
{
"chromeWebSecurity": false
}
You can disable security to overcome this issue.
Go to cypress.json file.
Write { "chromeWebSecurity": false } and save.
Run the test again.
I had exactly the same problem, I advise you to do as DurkoMatko recommends. Documentation chromeWebSecurity
But I encountered another problem with a link pointing to localhost in an iframe.
If you want to use a link in an iframe I recommend this :
cy.get('iframe').then((iframe) => {
const body = iframe.contents().find('body');
cy.wrap(body).find('a').click();
});
I have also faced this issue. My application was using service workers. Disabling service workers while visiting a page solved the issue.
cy.visit('index.html', {
onBeforeLoad (win) {
delete win.navigator.__proto__.serviceWorker
}
})
Ref: https://glebbahmutov.com/blog/cypress-tips-and-tricks/#disable-serviceworker
So, at least for me, my further problem was an internal one with tokens, logins, etc. BUT!
the code I posted for how the index in the plugin folder is correct to bypass the chrome issue. That is how you want to fix it!
Goto your cypress.json file.
Set chrome web security as false
{
"chromeWebSecurity": false
}
To get around these restrictions, Cypress implements some strategies involving JavaScript code, the browser's internal APIs, and network proxying to play by the rules of same-origin policy.
Acess your project
In file 'cypress.json' insert
{
"chromeWebSecurity": false
}
Reference: Cypress Documentation
I have a AngularJS Project, and when i click refresh inside the gamesList page i get a Blank page.
this is my app.js :
var app = angular.module("app",['ngRoute','superCtrl']);
app.config(routeConnect);
function routeConnect($routeProvider,$locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/',{
templateUrl:'/App/templates/home.html',
controller:'navCtrl'
})
.when('/gamesList', {
templateUrl:'/App/templates/gamesList.html',
controller:'gamesListCtrl'
}));
}
I run the application with http-server and when i hit the refresh button in the log i get :
"Get /gamesList" Error(404):"Not Found"
Also i noticed that in the chrome developer the source is changes:
Before:
After:
Any idea for this problem?
If you don't know what causes this issue, just remove $locationProvider from your .config in app.js...
I removed the $locationProvider so issue is gone but i have to use
`http://localhost:8080/#/home'
But the '#' comes in the url...
You need to configure your server
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
I'm creating a Chrome extension for the first time.
I've used chrome.notifications.create in it, but it does not work! This is my code:
chrome.storage.sync.get('refresh_time',function(items){
status = $('td.c').next().html();
if (status.trim() == 'SomeText') {
alert('Works');
var opt = {
type: "basic",
title: "Project1",
message: "This is my first extension.",
iconUrl: "icons/icon-128.png"
};
chrome.notifications.create('statusChanged', opt, function(){});
}
})
I get the alarm after execution, but chrome notification does not work! May you tell me what is wrong in my code?
By the way, I used the code below in my manifest file.
"permissions" : [
"storage",
"notifications",
"tabs"
]
I think you need to make iconUrl a chrome extension path, something like this:
iconURL: chrome.runtime.getURL("icons/icon-128.png")
I think that the code is good. However, I guess that you need to confirm the iconUrl path. If the file specified by the path does not exist, the notification will not be displayed. At the time, you may see the following error message on the console tab of the DevTools:
Unchecked runtime.lastError while running notifications.create: Unable to download all specified images.
You need to specify the valid path for the iconUrl value.
For me, the notifications were disabled on windows. Make sure that "Get notifications from apps and other senders" is enabled.
Probably, you need to modify the image path as:
iconUrl: "../icons/icon-128.png"
I am new to Chrome extension. I have a question about how to make the extension to open a "Help" page automatically after installation. Currently, I am able to check whether the extension is running the first time or not by saving a value into localStorage. But this checking is only carried out when using click the icon on the tool bar. Just wondering if there is a way that likes FF extension which uses the javascript in to open a help page after the installation. Thanks.
Edit:
Thanks for the answer from davgothic. I have solved this problem.
I have another question about the popup. My extension checks the url of current tab,
if OK(url){
//open a tab and do something
}
else{
//display popup
}
Is it possible to show the popup in this way?
Check this updated and most reliable solution provided by Chrome: chrome.runtime Event
chrome.runtime.onInstalled.addListener(function (object) {
let externalUrl = "http://yoursite.com/";
let internalUrl = chrome.runtime.getURL("views/onboarding.html");
if (object.reason === chrome.runtime.OnInstalledReason.INSTALL) {
chrome.tabs.create({ url: externalUrl }, function (tab) {
console.log("New tab launched with http://yoursite.com/");
});
}
});
Add this to your background.js I mean the the page you defined on manifest like following,
....
"background": {
"scripts": ["background.js"],
"persistent": false
}
...
UPDATE: This method is no longer recommended. Please see Nuhil's more recent answer below.
I believe what you need to do is put something like this into a script in the <head> section of your extension's background page, e.g. background.html
function install_notice() {
if (localStorage.getItem('install_time'))
return;
var now = new Date().getTime();
localStorage.setItem('install_time', now);
chrome.tabs.create({url: "installed.html"});
}
install_notice();
As of now (Aug 2022) the right way to execute code on first install or update of an extension using Manifest V3 is by using the runtime.onInstalled event.
This event is documented here: https://developer.chrome.com/extensions/runtime#event-onInstalled
There is one example for this exact case in the docs now:
https://developer.chrome.com/docs/extensions/reference/tabs/#opening-an-extension-page-in-a-new-tab
Note: This example above is wrong as the callback function parameter is Object with the key reason and not reason directly.
And another example here (this one is correct but does not open a tab):
https://developer.chrome.com/docs/extensions/reference/runtime/#example-uninstall-url
chrome.runtime.onInstalled.addListener((details) => {
if (details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
// Code to be executed on first install
// eg. open a tab with a url
chrome.tabs.create({
url: "https://google.com"
});
} else if (details.reason === chrome.runtime.OnInstalledReason.UPDATE) {
// When extension is updated
} else if (details.reason === chrome.runtime.OnInstalledReason.CHROME_UPDATE) {
// When browser is updated
} else if (details.reason === chrome.runtime.OnInstalledReason.SHARED_MODULE_UPDATE) {
// When a shared module is updated
}
});
This code can be added to a background service worker: https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/
It would be better to place a "version" number so you can know when an extension is updated or installed.
It has been answered here:
Detect Chrome extension first run / update
All you need to do is adding the snippet below to your background.js file
chrome.runtime.onInstalled.addListener(function (object) {
chrome.tabs.create({url: `chrome-extension://${chrome.runtime.id}/options.html`}, function (tab) {
console.log("options page opened");
});
});