Here I am working with chrome my menifest.json file like :
{
"name": "chrome Demo",
"version": "1.0",
"description": "Official addon from chrome",
"browser_action": {
"default_icon": "star-on.png",
"popup": "popupnew.html"
},
"permissions": [
"tabs",
"cookies",
"http://*/*",
"https://*/*",
"contextMenus"
],
"background_page": "background.html"
}
Here it work fine when I click default_icon on browser it will open popup page.
Now my concern is I want to open my popup page using script. "In background I want to write script which able to handle popup page"
thanks in advance..
Sorry, but currently there is no way of opening it programmatically.
You can open popup.html in a new window or tab. While this isn't quite the functionality you are looking for it will have a similar effect. Especially if you format the new window similarly.
Have you tried using chrome.pageAction.show()? I've never had to use this before but I believe it's what you're looking for.
Related
I am using the Debugger for Chrome VS Code extension. I am working on a React project using yarn start, which opens at localhost:3000.
I have an already running instance of Chrome where I am logged in using my Google account. However when I hit "Launch Chrome against localhost", the tab opens in a new instance of Chrome where I am not logged in.
How do I force the tab to open in my already-running instance of Chrome instead?
launch.json:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
]
}
The following guide was helpful, basically you want to use "request": "attach" not "request": "launch".
https://www.freecodecamp.org/news/how-to-set-up-the-debugger-for-chrome-extension-in-visual-studio-code-c0b3e5937c01/
I'm building a chrome extension and it includes a simple popup page that appears when you click on the extension's icon. This popup page consists of some simple HTML, CSS and jQuery code. Nothing fancy.
The JS seems to be running fine but the CSS hover, transition, and animation effects are extremely laggy (up to 5 seconds lag) when I interact with it on an external monitor.
Everything else runs perfectly fine and I can see that the JavaScript is executing as expected. It's just the above mentioned CSS rendering issues.
The funny thing is that if I drag the same browser window to my laptop's native screen, the issue is gone. Everything runs smoothly. Drag the same window over to any of my 2 external monitors and Bam! Lag city...
I've tested on my friend's computer and he has the same problem. Works fine on native screen, laggy on external monitors. So far it appears that the issue only occurs on Macs. Through the process of elimination, I know that the issue is not caused by the monitor itself and has nothing to do with the video input cables. I've only been able to observe this bug on external monitors connected to my Macbook Pro (Early 2015) and my friend's Macbook Pro (Early 2014).
Things I have tried (and didn't help):
Disabling "hardware acceleration" via Chrome settings
Restoring Chrome to default settings
Monitoring system performance (CPU and Memory usage are both well below limits)
Monitoring Chrome Task Manager (The extension is using minimal memory and no notable CPU usage difference between the laggy and non-laggy tests)
Toggling a bunch of settings in chrome://flags
Switching out various cables (HTMI, DVI, and VGA)
Curious to know if anyone else has run into similar issues? This weird external monitor lag issue has been bugging me all week and I'm all out of ideas.
Github repo to demo project -> https://github.com/peachteaboba/chrome_extension_bug_demo
------------------------- Update -------------------------
I've pinpointed the source cause of the bug. Apparently if you include a background.js file in the manifest.json then the popup lags. If you do not include a background script then the lag is gone.
manifest.json (laggy version)
{
"manifest_version": 2,
"name": "Chrome Extension Bug Demo v2",
"description": "Chrome Extension Bug Demo v2",
"version": "2.00",
"author": "",
"browser_action": {
"default_icon": "images/bug.png",
"default_title": "Chrome Extension Bug Demo v2",
"default_popup": "popup.html"
},
"chrome_url_overrides": {},
"permissions": [
"storage",
"tabs"
],
"background": {
"scripts": [
"js/background.js"
]
},
"web_accessible_resources": [
"script.js"
],
"externally_connectable": {
"matches": [
"http://*/*",
"https://*/*"
],
"accept_tls_channel_id": true
}
}
manifest.json (non-laggy version)
{
"manifest_version": 2,
"name": "Chrome Extension Bug Demo v2",
"description": "Chrome Extension Bug Demo v2",
"version": "2.00",
"author": "",
"browser_action": {
"default_icon": "images/bug.png",
"default_title": "Chrome Extension Bug Demo v2",
"default_popup": "popup.html"
},
"chrome_url_overrides": {},
"permissions": [
"storage",
"tabs"
],
"background": {
"scripts": [
]
},
"web_accessible_resources": [
"script.js"
],
"externally_connectable": {
"matches": [
"http://*/*",
"https://*/*"
],
"accept_tls_channel_id": true
}
}
The only change made was removing "js/background.js" from the background scrips section. The actual background.js file is empty, so even including this empty script will trigger the Chrome bug.
There is a Chromium bug ticket open for this issue. You can view that via this link: https://bugs.chromium.org/p/chromium/issues/detail?id=971701
We faced this issue in production for our Chrome Extension at usebubbles.com and worked around it by forcing the popup to repaint while opened on a secondary monitor on MacOS.
Simply add the following to the top of a javascript file included from your popup.html:
/**
* Temporary workaround for secondary monitors on MacOS where redraws don't happen
* #See https://bugs.chromium.org/p/chromium/issues/detail?id=971701
*/
if (
// From testing the following conditions seem to indicate that the popup was opened on a secondary monitor
window.screenLeft < 0 ||
window.screenTop < 0 ||
window.screenLeft > window.screen.width ||
window.screenTop > window.screen.height
) {
chrome.runtime.getPlatformInfo(function (info) {
if (info.os === 'mac') {
const fontFaceSheet = new CSSStyleSheet()
fontFaceSheet.insertRule(`
#keyframes redraw {
0% {
opacity: 1;
}
100% {
opacity: .99;
}
}
`)
fontFaceSheet.insertRule(`
html {
animation: redraw 1s linear infinite;
}
`)
document.adoptedStyleSheets = [
...document.adoptedStyleSheets,
fontFaceSheet,
]
}
})
}
If you are in a Dual monitor environment and face Input lag issues, it is related to your physical window size.
Do not attempt to try it on your big monitor, but, instead, try your chrome extension on your laptop(your MacBook) device itself. You will see it will work on your mac, but not on your connected big screen.
I have set a manifest.json including icon with 192x192 png and 512x512png. When I use android and add to home screen, it just use the favicon for the app icon and the splash screen icon instead of the manifest icon. The splash icon is very small, I want a bigger logo and also using the icon set in the manifest. The manifest.json have already included in the header and Chrome Developer tools successfully detected it.
{
"name": "Apple",
"short_name": "Apple",
"icons": [
{
"src": "../images/favicon/icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "../images/favicon/icon-512x512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/apple/",
"scope": "/apple/"
}
I have tried to reinstall and clear website data many times but it remains unchanged.
Can anyone help? What is the pproblem? Thx!
You may refer with this post. One possible reason is that the Web App Manifest is not being parsed correctly. You can validate it using the Web Manifest Validator. You may also check this forum on how to debug if PWA manifest is not recognized.
There is a tool called Lighthouse ( https://github.com/GoogleChrome/lighthouse 103 ) to diagnose PWAs. See the corresponding talk from PWA Dev Summit 2016: https://www.youtube.com/watch?v=LZjQ25NRV-E&feature=youtu.be&list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb
I did a Chrome extension, successfully published it on Chrome Webstore, a friend installed it yesterday, and today, when launching Chrome, he sees Unsupported extensions disabled:
What are the usual reasons for that? How to fix it?
Note: the extension is just a minimalist:
{
"name": "...",
"version": "1.0",
"description": "...",
"content_scripts": [
{
"css": ["fix.css"],
"matches": ["http://*/*", "https://*/*"],
"run_at": "document_end"
}
],
"manifest_version": 2,
"permissions": ["*://*/*"]
}
and a fix.css that modifies the design of certain elements. Nothing else is in the extension. It is still accepted/published on the Chrome Webstore.
This is because extension is not published in Chrome webstore. Perhaps installing Chromium browser can help. It should allow to use non-webstore extensions.
There is also bit complexated way to use pre-installed extension described here.
As recommended in this page:
Try this removal procedure ... http://malwaretips.com/blogs/remove-discount-buddy-virus/
Try running the new Google Software Removal Tool ..(Windows Only). Do Browser Reset at end.
You may also check this Important: Updates on Chrome Extensions.
I made a simple chrome extension:
manifest.json:
{
"name": "Layout VS Design",
"version": "1",
"description": "Enter the url of a image with your design at 100%",
"background_page": "index.html",
"browser_action": {
"name": "Manipulate DOM",
"icons": ["icon.png"],
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "jquery.min.js", "js.js" ],
"matches": [ "http://*/*", "https://*/*"]
}]
}
The thing is that chrome won't let me install it:
The thing is I have no idea where to set this number, Any idea what can I try?
The first thing I see is that your background_page isn't formatted properly. It should be
{ ...
"background": {
"page": "index.html"
},
...
}
If you manifest.json file isn't formatted correctly, Chrome will reject the extension.
You can read more about the manifest formatting in the Manifest File Format documentation from Google.
Update
Another SO post detailed how Chrome looks for a "magic number" at the top of a .crx file. But, if you're hosting locally, you can install extensions in a simpler manner.
Save your manifest.json and background.html to a directory (the name doesn't matter)
Go to chrome:extensions
Make sure "Developer Mode" is checked at the top
Click "Load unpacked extension..."
Select the directory with your background and manifest files to install on Chrome.
go to extensions page
check developer options
click on pack extension
set root directory (folder in which your images and manifest file
exist)
pack extension
now disable developer options
go to root directory (do not open root directory saying this only so
that you could easily find file otherwise you can open it)
you will see a .crx file just open it with chrome (e.g. drag and drop this file onto the chrome://extensions/ page)
click on continue (will come at the bottom of chrome window)
Your Chrome browser is modified like you wanted