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
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 am working on a website build tool (https://github.com/bmargogne/website-builder.git). BrowserSync works perfectly while being on the root index.html, but it does not reload anywhere else...
Here is the (simplified) way of how I did... Let's say I have :
src/index.html
src/_header.html
src/page/index2.Html
One task builds HTML pages by including html partials (their names start with '_')
gulp.task('pagesHtml', () => {
const SRC = 'src/**/*.html';
const EXCLUDE = '!src/**/_*.html';
return gulp.src( [SRC, EXCLUDE], { ignoreInitial: false } )
pipe( fileinclude({ prefix: '##', basepath: co.src }))
.pipe( gulp.dest( 'www/' ));
});
One task start browser Sync server
gulp.task('serveLocal', () => {
return browserSync.init({
server:{ baseDir : 'www' },
port: 3000,
open: true
});
});
One task is called to reload browserSync (separated, as it is called by other 'watchers tasks' from my project)
gulp.task('liveReload', ()) => {
browserSync.reload();
});
And one task watch all HTML (including partials) and should rebuild the whole page, then reload.
gulp.task('watch-pagesHtml', () => {
const SRC = 'src/**/*.html';
return watch( SRC, () => {
runSequence('pagesHtml', 'liveReload');
});
return;
});
I start these tasks by starting runSequence like this :
gulp.task('default', () => {
runSequence('pagesHtml', 'watch-pagesHtml');
});
When I work on index or _header : No problems at all! The changes are applied, built, and the browse reloads.
However, when I work on pages/index2, the changes are applied and built, but the browser does not reload. (though a F5 works and shows the change applied )
What did I do wrong ?
Browsersync works by injecting an asynchronous script tag in the body, start your project and inspect the body tag. (With browser developer tool).
If you can't fine something like:
<script async>...</script> (and browsersync stuffs), there is the problem.
I read your code, and I notice that you write the <body> (open tag) in header file, and </body> (close tag)in other footer file, and it is confusing but I did not find the body tag in the other html files when I think that was necessary.
The browser "try" to fix errors in the html, auto completing tags from the original html file for example.
I have two possible answers to your problem.
1) The browser autocomplete the tag in the header file, an also autocomplete the tag in the footer file, so browsersync have problems to inject de asynchronous script tag that is necessary to reload the page because there are two bodies. (if this is possible)
2) The browser do not find the body tag in the html, so the browser create it after, but browsersync inject the script in your html file, not in the browser.
Make sure that the body tag is generated by your own code and not by the browser.
I hope that helps.
A bit late but if someone still looking for an answer, you can do something like that:
var browserSync = require("browser-sync");
browserSync({
proxy: "wordpress.dev",
snippetOptions: {
ignorePaths: "wp-admin/**"
}
});
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 !
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");
});
});