Insert Javascript in the DOM like Google Chrome Extension

[jona...@office-bit.com]

Hi,

Thanks you so much for your application Node Webkit,
However I have a question :

How can I Insert Javascript in the DOM like Google Chrome Extension ?


For example :

1) My file package.json is :

{
  "main": "http://google.com",
  "node-main": "app.js",
  "nodejs" : true,
  "name": "nw-demo",
  "description": "demo app of node-webkit",
  "version": "0.1.0",
  "keywords": [ "demo", "node-webkit" ],
  "window": {
    "title": "node-webkit demo",
    "icon": "link.png",
    "toolbar": true,
    "frame": true,
    "width": 800,
    "height": 600,
    "position": "center"
  },
  "webkit": {
    "plugin": true
  }
}


2) My file app.js is :

document.body.style.background = 'red';


3) I want to get this result :

​

Like Chrome Extension, I want insert my javascript in the DOM.

So is it possible ?

Thank you !

-- 
------------------------------------------------
株式会社bit　ジョナサン

jona...@office-bit.com
http://www.office-bit.com/

〒602-8022
京都市上京区養安町242-1　ROOST御所西4F
TEL： 075-213-0825　　FAX：075-213-0822

[JustAnotherCoder]

Not sure I completely understand your question, but if you're asking how to inject CSS or JS into a framed webpage in your app, the best way to do it is by using webview (which the latest version of NW supports, and is similar to an iframe but has some advantages in my opinion).

For JS injection, see this...
https://developer.chrome.com/apps/tags/webview#method-executeScript

And for CSS injection, see this...
https://developer.chrome.com/apps/tags/webview#method-insertCSS

A quick example...

HTML:

<webview id="myWebview" src="http://www.google.com"></webview>

JS:

var webviewFrame = document.getElementById("myWebview");

// Listen for the framed page to stop loading
webviewFrame.addEventListener('loadstop', function(e) {
    // Insert JS into the page
    webviewFrame.executeScript({ code: " document.body.style.background = 'red'; " });
    // Or insert CSS into the page
    webviewFrame.insertCSS({ code: " body { background: red; } "});
});  

[Siddhartha Gupta]

You can use 'inject-js-start' or 'inject-js-end' as per need from package.json itself to inject JS into DOM

https://github.com/nwjs/nw.js/wiki/manifest-format#inject-js-start--inject-js-end

[Faleme Jonathan]

Siddhartha Gupta,

Thank you so much !
It's exactly what I want to do!