I am currently managing a staging environment with some authentication.
I was able to run my tests by embedding credentials to URL like this:
https://johndoe:foobar#app.s.product.com/#login
However, my tests fail because of chrome, dropping this feature(https://www.chromestatus.com/feature/5669008342777856). Is there any other way I can access our staging site? I tried inspecting the popup for credentials and maybe I can sendKeys(), but to no avail.
Thanks in advance!
Have this problem too. My solution is creation chrome extension and add it to chrome on startup.
Create two files in some new folder:
background.js (change user and path with yourth)
chrome.webRequest.onAuthRequired.addListener(
function(details, callbackFn) {
console.log("onAuthRequired!", details, callbackFn);
callbackFn({
authCredentials: {username: "user", password: "pass"}
});
},
{urls: ["<all_urls>"]},
['asyncBlocking']
);
manifest.json
{
"manifest_version": 2,
"name": "Authentication for tests",
"version": "1.0.0",
"permissions": ["<all_urls>", "webRequest", "webRequestBlocking"],
"background": {
"scripts": ["background.js"]
}
}
Pack them into crx (chrome://extensions/ -> Pack extension)
Add this file to project
Add to conf.js:
As first line
var fs = require('fs');
const ext64 = fs.readFileSync('./ext.crx', 'base64');
exports.config = {
...
and to chrome options
capabilities: {
browserName: 'chrome',
chromeOptions: {
args: ['--no-sandbox'],
extensions: [ext64]
}
},
Related
Is used the two packag.json structure to load dependencies in electron builder config.
"build": {
"asar": true,
"asarUnpack": "node_modules/puppeteer/.local-chromium/**/*",
"appId": "client.zpa",
"directories": {
"output": "./dist-exec",
"app": "."
},
"win": {
"target": [
{
"target": "nsis",
"arch": [ "ia32" ]
}
]
},
"nsis": {
"artifactName": "${productName}_${version}1231.${ext}"
}
...
"dependencies": {
"serial-number": "1.3.0",
"puppeteer": "~1.15.0",
"hummus": "~1.0.104"
}
in dist/node_modules/puppeteer the folder .local-chromium is missing. Any ideas how I can force installing local chromium?
I had the same problem.
Solved via downloading chromium according to current OS (Windows/Linux/Mac OS) on first start.
And, if there is Google Chrome browser available on running machine, you can pass path to chromium in puppeteer config.
Something like this on Windows C:\Program Files (x86)\Google\Chrome\Application\chrome.exe or run this
/System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/Support/lsregister -dump | grep -i "google chrome"
on Mac OS to find path to Google Chrome.
I've heard that it is possible to use Electron IPC and that calls into the JavaScript boot file and then run puppeteer from there.
But haven't tried.
After 2 days of searching on StackOverflow and GitHub issues, I found that no actual solutions to build the local chrome with the electron app the best solution was to set the executable path and use chrome installed on the pc but many answers said that You will do it manually but I found this better to do it using "chrome-path" npm package to set path of chrome auto in mac or Linux or Windows here it's my code background.js
const puppeteer = require("puppeteer")
const chromePaths = require('chrome-paths');
//your electron init window
const browser = await puppeteer.launch({
executablePath:chromePaths.chrome,
headless: false,
defaultViewport: null,
args: ['--no-sandbox', '--start-maximized' ],
slowMo:25,
})
const page = await browser.newPage();
await page.goto("https://google.com")
await app(page)
`
Is there a way to only make my OWN browser (Chrome) not be able to go back / forward / refresh?
This happens rather often that when Im developing and playing around in devtools (Changing HTML and CSS just to try things out) I sometimes accidentally swipe back or out of habit hit refresh. I would like to be able to disable the back or forward button via some sort of extension?
I am NOT trying to disable the button on any live-website, just for me locally. Any ideas?
If you want to prevent accidental navigations, there's no need to install any extension. Just open the console, and run the following code:
window.onbeforeunload = function() {
return 'Want to unload?';
};
With this code, you will get a confirmation prompt.
If you really want to prevent the page from unloading via an extension, use the technique described in the answers to How to cancel webRequest silently in chrome extension.
Here's a minimal demo extension that adds a button to your browser. Upon click, you cannot navigate to a different page any more. You can still close the tab without any warning, though:
// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.webRequest.onBeforeRequest.addListener(function(details) {
var scheme = /^https/.test(details.url) ? 'https' : 'http';
return { redirectUrl: scheme + '://robwu.nl/204' };
// Or (seems to work now, but future support not guaranteed):
// return { redirectUrl: 'javascript:' };
}, {
urls: ['*://*/*'],
types: ['main_frame'],
tabId: tab.id
}, ['blocking']);
});
manifest.json for this extension:
{
"name": "Never unload the current page any more!",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": true
},
"browser_action": {
"default_title": ""
},
"permissions": [
"<all_urls>",
"webRequest",
"webRequestBlocking"
]
}
I'm writing my first Chrome Extension. I've used permission, but I'm seeing my button everywhere.
How can I only show the button on the addresses I'm writing the extension for?
Although the answer from #Sorter works, it is not the best way to solve the problem.
First and foremost, it does not always work. If the page used history.pushState, the page action will disappear and not come back until you trigger the onUpdated or onHighlighted event again Chromium issue 231075.
Secondly, the method is inefficient, because it's triggered for every update of tab state on all pages.
The most efficient and reliable way to get a page action to appear on certain domains is to use the declarativeContent API. This is only available since Chrome 33. Before that, the webNavigation API was the most suitable API. The advantage of these API over the method using the tabs API is that you can safely use event pages, because you can declare URL filters. With these URL filters, the events will only be triggered if you navigate to a page that matches the URL filters. Consequently, your extension/event page will not be activated until really needed (= no wasted RAM or CPU).
Here's a minimal example (background.js) using the webNavigation API:
function onWebNav(details) {
if (details.frameId === 0) {
// Top-level frame
chrome.pageAction.show(details.tabId);
}
}
var filter = {
url: [{
hostEquals: 'example.com'
}]
};
chrome.webNavigation.onCommitted.addListener(onWebNav, filter);
chrome.webNavigation.onHistoryStateUpdated.addListener(onWebNav, filter);
manifest.json:
{
"name": "Name ",
"version": "1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_title": "Only visible on stackoverflow.com"
},
"permissions": [
"webNavigation"
]
}
If you target Chrome 33 and higher, then you can also use the declarativeContent API instead. Simply replace the "webNavigation" permission with "declarativeContent", and use the following background script (background.js):
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {
hostEquals: 'example.com'
}
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
In both examples, I used a UrlFilter that matches the example.com domain.
Create background.js which checks for updated and highlighted tab.
function checkForValidUrl(tabId, changeInfo, tab) {
// If 'example.com' is the hostname for the tabs url.
var a = document.createElement ('a');
a.href = tab.url;
if (a.hostname == "example.com") {
// ... show the page action.
chrome.pageAction.show(tabId);
}
};
// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);
//For highlighted tab as well
chrome.tabs.onHighlighted.addListener(checkForValidUrl);
Create popup.html and popup.js in the similar manner.
You can use the variables defined in background.js in content scripts (popup.js) with
chrome.extension.getBackgroundPage().variableName
Here's the example extention download link.
For your reference and ease, here's the sample manifest.json file
{
"manifest_version": 2,
"name": "Example Extension",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"page_action":{
"default_icon": "images/icon_16.png",
"default_popup": "popup.html",
"default_title": "Title for the extension"
},
"permissions": [
"tabs"
]
}
An Updated Way:
I use the following with great success:
chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
var url = info.url || tab.url;
if(url && url.indexOf('example.com') > -1)
chrome.pageAction.show(tabId);
else
chrome.pageAction.hide(tabId);
});
When I inspected the page, script is injected as expected. But in the console I get Denying load of chrome-extension://lkklhmfekbnfjhmcapngedajgkfbmapm/lib/codemirror.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
manifest.json
{
"name":"test",
"description":"Test description",
"version":"1.0",
"manifest_version": 2 ,
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["file:///*test*"],
"js": ["test.js"]
}
],
"web_accessible_resources": ["lib/codemirror.js"]
}
test.js
var srcArray = ["lib/codemirror.js"];
function AddScript(value)
{
var s = document.createElement("SCRIPT")
s.src = chrome.extension.getURL(value);
s.onload = function() {
this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);
}
srcArray.forEach(AddScript);
I cannot figure out what may be causing the issue. Any advice would be appreciated.
I'm not sure, but if you want to insert some scripts to some page, you can use chrome.tabs.executeScript API. That is good way, and you don't care about web_accessible_resources
How can I create an extension for Chrome that adds an icon to the toolbar, and when you click it, it opens a new tab with some local web page (for example: f.html)?
I saw this question, but it doesn't really explains what should I add in the manifest file...
This is not true for newer chrome apps.
Newer chrome apps having manifest_version: 2
requires the tabs be opened as:
chrome.browserAction.onClicked.addListener(function(activeTab)
{
var newURL = "http://www.youtube.com/watch?v=oHg5SJYRHA0";
chrome.tabs.create({ url: newURL });
});
Well, in the extensions docs, it states in manifest, you would need to include "tabs" as its permission. Same way they explain the hello world application:
Manifest File:
{
"name": "My Extension",
"version": "1.0",
"description": "Opens up a local webpage",
"icons": { "128": "icon_128.png" },
"background_page": "bg.html",
"browser_action": {
"default_title": "",
"default_icon": "icon_19.png"
},
"permissions": [
"tabs"
],
}
Within the background page, you listen to the mouse click event on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': chrome.extension.getURL('f.html')}, function(tab) {
// Tab opened.
});
});
As you noticed above, you will see that I used the question you saw in the other post. Note, this isn't tested, but I believe it should work.
chrome.tabs.create need the permission of "tabs".
Simply using window.open in extension without need of any permission. and the code is shorter. I suggest this solution.
window.open(url,'_blank');