I have used chrome packaged app that Chrome-Serial-App-master
enter link description here
Manifest
"app": {
"background": {
"scripts": [
"main.js"
]
}
},
"permissions": [
"serial"
]
I want to receive value from packaged app to my website at text box area
Can I access my webpage Dom ?
or use message passing?
Not sure I understand the question, but you can use XMLHttpRequest to read the HTML of any webpage and then display that by setting the innerHTML property of some element.
You can use message passing. You can use chrome.runtime.onMessageExternal or chrome.runtime.onConnectExternal chrome APIs for this purpose.
Related
Im trying to write a Chrome extension that has a dev tools panel. This extension needs to call functions defined on a property on window in a webpage that I also have made. In other words, the extension is only for my own web page and I control both. Example:
// This script is added in my own webpage application when it loads
window.myTest = () => { /* do something */ }
I want to be able to call the function window.myTest from my Chrome extension. I need to make similar functionality like https://github.com/zalmoxisus/redux-devtools-extension.
It seems that I need to do this by inject script/code from my backend page. I have all working, extension with backend page that gets invoked and I can see that the code that I inject gets called in the page context (testing by console.log gets written to the console output of the page).
Here is my code:
manifest.json
{
"manifest_version": 2,
"name": "MyTest",
"description": "MyTest",
"version": "0.0.1",
"minimum_chrome_version": "10.0",
"devtools_page": "devtools.html",
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["testscript.js"]
}],
"permissions": [
"tabs",
"<all_urls>"
]
}
testscript.js
window.myTest(); // myTest is undefined in the context of the injected script
background.js
// empty, but here to be able to open background page
I also have a pannel that sends a message to the background page when a button is clicked. I know that the panel and sending the message also work. But window.myTest is still undefined.
Edit
Removed the injection from background.js, because I did not use it and have same issue as described.
Finally, I got the specs on this. Mozilla and Chrome follow the same specs for extensions.
Content scripts get a "clean" view of the DOM. This means:
Content scripts cannot see JavaScript variables defined by page
scripts.
If a page script redefines a built-in DOM property, the
content script sees the original version of the property, not the
redefined version.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts
Is there any way to bind a content script to Chrome's start page?
I tried setting matches to "*", but it doesn't even run. With "*://*/*" it does not bind.
No, you cannot*. Technically, the start page is chrome://newtab/, and Chrome Extensions cannot access chrome:// pages for security reasons, not even with the widest "<all_urls>" permission.
Your only hope is to make your own New Tab page, though it would be hard to replicate all of the default functionality (e.g. thumbnails of top sites).
* One can enable this with Chrome Flags: chrome://flags/#extensions-on-chrome-urls But this is only applicable if the extension is for personal use and is a potential security risk.
Yes! Chrome's Start page (¿now?) has the hidden URL of the form:
https://www.google.com/_/chrome/newtab?espv=2&ie=UTF-8
And extensions with manifest.jsons like:
{
"manifest_version": 2,
"content_scripts": [ {
"js": [ "HelloWorld.js" ],
"matches": [ "*://*/_/chrome/newtab*" ]
} ],
"name": "Chrome start test",
"description": "Runs on the Chrome Start page",
"version": "1"
}
...run perfectly well on the Start page.
The integration guidlines for the Spotify Apps API mentions DefaultTabs and how it should be expressed in the manifest.json file to achieve tabbing in your Spotify app. Unfortunately I have problem getting this to work and the app that it refers to (Tabs, with the URI spotify:app:tabs) for example doesn't exist in my preview build of the Spotify application.
The application can specify what tabs it wants in the manifest file, in the DefaultTabs attribute. The attribute must be a list of records. Each record must contain the attributes arguments and title. The title can, and should, be localized by making it into a record with attributes for each language (currently en, fr and es).
I have tried the following:
Adding this snippet to my manifest.json file:
"DefaultTabs": [{
arguments: [],
title: {"en": "På TV4"}
}
]
Quitting the Spotify application and reloading it.
Load my app by entering it's address spotify:app:name in the address field.
Here I expected to see the tabs loaded, but it wasn't. Any help with the correct syntax would be appreciated.
I had a few issues at first too, but the following snippet works for me:
"DefaultTabs": [
{
"arguments": "test",
"title": { "en": "test" }
},
{
"arguments": "test2",
"title": { "en": "test2" }
}
]
I think you are probably missing the arguments.
Also check out the Kitchensink demo app and sourcecode in GitHub: https://github.com/ptrwtts/kitchensink
I want to obtain the text of an iframe in Google Chrome using Javascript. (I will pass this text using a chrome extension to a google app engine application, which will then do processing using the data received). Also, can you also tell me how to encode this into JSON format and send this data as part of a call to external web application? (Although if you can only tell me how to obtain body text that will also be good enough for me :) )
I have done similar work in my extension. I just put this
document.body.innerHTML
in my contentscript.js, and this is part of my manifest.json
"content_scripts" : [
{
"matches" : [
"http://*/*",
"https://*/*"
],
"js" : ["contentscript.js"],
"run_at" : "document_idle",
"all_frames" : true
}
],
I'm developing a google chrome extension and I'm running into a relative path problem.
If I give a relative path to an image and open the plugin in a certain page it will look for that image in the website's path rather than the extension's.
Any ideas?
If you're using CSS in your extension pages (background, popup, infobar, etc) then you can use relative paths with a slash (/):
background-image:url("/sprites.png");
The above should work, everyone uses it. But, if your using it for content scripts and you can do the same for any css, you would need to use the predefined message like:
background-image:url('chrome-extension://__MSG_##extension_id__/sprites.png');
If you want to programmatically set it, you can use the chrome.extension.getURL syntax as following:
var url = chrome.extension.getURL('sprites.png');
These are the ways that you can refer to a specific url/image.
In addition, as mentioned in this answer, if you place your image assets in a directory, these files are not accessible in the web page DOM automatically. The developer should specify the resources that can be loaded the page by using the "web_accessible_resources" setting in the manifest.json file:
#mohamed's answer worked for me but it took my a while to put it all together. I've answered this else where but here is the solution that worked for me.
My solution.
With Menifest v2 you need to add web_accessible_resources to the file and then use chrome-extension://__MSG_##extension_id__/images/pattern.png as the url in your css file.
CSS:
#selector {
background: #fff url('chrome-extension://__MSG_##extension_id__/images/pattern.png');
}
Manifest.json
{
"manifest_version": 2,
"name": "My Extension Name",
"description": "My Description",
"version": "1.0",
"content_scripts": [
{
"matches": ["https://mydomain.com/*"],
"css": ["style.css"]
}
],
"permissions": [
"https://mydomain.com/"
],
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "My Extension Name"
},
"web_accessible_resources": [
"images/pattern.png"
]
}
p.s. Your manifest.json might look different to this one.
In some cases you might even use inline base64 encoding of the image. For example,
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB..." />
Same you can apply to your CSS. You can find image encoders all over the web.