"chrome extensions" in atom-shell (anything better than loadUrl + executeJavaScript?)


#1

I would like to load a remote URL and make some modifications to the page, like a plain-ol’ Chrome extension. However, I’m trying to do this from my “Browser” code and it seems kind of clunky so I’m guessing I’m doing something wrong… Here’s what I have:

var app = require('app');
var BrowserWindow = require('browser-window');
var fs = require('fs');

...

app.on('ready', function() {
    mainWindow = new BrowserWindow({width: 800, height: 600});
    mainWindow.loadUrl('https://www.google.com')
    mainWindow.webContents.on('did-finish-load', function() {
        var file = fs.readFileSync(__dirname + '/extension.js', "utf8");
        mainWindow.webContents.executeJavaScript(file);
    });

...

});

And extension.js looks like:

document.getElementsByName("q")[0].value = 'GOOGLE THINGS HERE';

This actually works, but is there a cleaner way to do this? And things start to get really messy when I try to do things like load jQuery (by concatenating strings returned from fs.readFileSync.

I’d love to hear of alternative ways of creating “atom extensions” to modify remote web pages loaded with loadUrl.


Is it possible to install Chrome Extensions in a Webview?
#2

I also want to know better solution, I want to execute

window.on('beforeunload', function(event) {
    return false;
});

on every loaded page (like content script in Chrome extensions)


#3

I’m not entirely sure why you’re not using require based modules. Is there a reason?
The approach I’m using is quite a bit cleaner, and uses requires and objects to form a lifecycle and dependency tracking system. However, the code is a bit too long and spread out to post here.

It basically goes like this:

  • api.loadExtensions()
  • Search the extension directory for folders.
  • Check each folder for a package.json, read it.
  • api.extensions[package.name] = require(path.join("/path/to/extension/folder/", package.main))
  • Extensions have access to a global globals.api object, which provides methods for loading other extensions and accessing their properties. They all inherit from api.Extension, which provides lifecycle methods such as onEnable and onDisable.
  • When all extensions have been loading using require, run each of their onEnable methods.
  • Extensions can now do stuff and access each other using api.getExtension("name") (which loads the extension referenced if it is not loaded already, should help with dependency issues.), access jQuery through api.$, access the window through api.window, among other things.

In this way, all extensions are closured, but at the same time can let other extensions access their methods, as well as operate on the main document and window object.

Hopefully this is of some help to you! (And boy, I am not used to this forum’s time system, I thought this topic was brand new.)