I'm loading a webpage via http, and this webpage renders a webview like this (using react)
render() {
return <webview
nodeintegration="true"
preload={`file://${what_should_i_put_here}`}
src={`some_website`}
/>;
}
I would like to import preloadScript from 'npmPackage/lib/preloadScript.js', and inject the preloadScript into the webview.
Is that achievable?
__dirname gives / because of the webpack config
is obviously part you may need adjust. So 1. either main process correctly resolve path and send to ipc, then react component picks up render cycle or 2. configure wepback's external to not to wrap up node's internal so renderer directly access those context.
Related
As the title say, I am trying to develop a plugin architecture for an electron app.
So far I have handle my custom plugin store the download of the plugin source which consist of an single main.js and a style.css.
I am stuck now since I don't know how to "require" the file from my application.
A little more explanation on this main.js file:
I want to require that main.js file to that I can retrieve the exported class to create a new instance in my PluginManager system.
It would be like so:
// plugin-manager.ts
loadPlugin(pluginId: string) {
const pluginClass = await import(path.join('/somewhere-in-the-fs', pluginId));
const plugin = new PluginClass({ app: myApp });
this.enabledPlugins.push(plugin);
}
tldr: I'm stuck at the await import() part because obviously my plugin is not in my running node environment.
I'm making a Thunderbird Extension through the WebExtension Api (with popup) and i've some difficulties running a Content script to get some elements (attachments list of the current mail for example) directly from Thunderbird interface.
I've made a popup.html , a popup.js and a contentScript.js that runs when the popup is opened. Apparently contentScript.js doesn't run in the main Thunderbird tab, but runs smoothly when i open a new tab (with url) through code.
$(document).ready(function(){
console.log('Try to execute contentScript');
// -- create new tab --
// browser.tabs.create({
// url: 'https://example.org'
// });
// -- execute script in current tab --
browser.tabs.executeScript({
file: 'scripts/contentScript.js'
});
});
// from contentScript.js
console.log('contentScript.js - Injected');
In console i expected "contentScript.js - Injected" but this only appens when i am not in the main Thunderbird tab.
When i am in the main tab it shows only "Try to execute contentScript" then nothing appens, no errors.
Thunderbird extension are evolving right now from the old legacy method (overlay of xul files) to the actual WebExtension Api used by most of the browsers, but there are some differences: in Firefox the extension works without any problem, so i supposed that the main tab of Thunderbird is somehow protected from content injection.
My objective here is to get the attachments list and other elements directly from the interface, but apparently i can't.
I am going to develop a very large application using Angular 7 Framework.
I have created a blank angular workspace using
ng new angular-app --create-application=false
And in this workspace I have two angular applications created using the following commands:
ng generate application app-one
ng generate application app-two
Inside each of the two applications, I am going to have multiple components each working independently of each other.
I am looking for a way to create a separate javascript build file for each of the component so as to reduce the build size.
And use each of the separately build js files to use each component as a web component.
Please read what I have already tried to get a better idea.
I have tried the following steps:
Create a repository with prefix custom for custom angular elements:
ng new app-name --prefix custom
Add the angular elements package:
ng add #angular/elements
Create custom element component with encapsulation as native/emulated/none as required:
ng g component my-component --inline-style --inline-template -v Native
Define the custom element in app.modulte.ts
import { Injector} from '#angular/core';
import { createCustomElement } from '#angular/elements';
...
export class AppModule {
constructor(private injector : Injector){
const el = createCustomElement(MyComponent, {injector : this.injector});
customElements.define('my-component',el);
}
ngDoBootstrap(){ }
}
Install ngx-build-plus package for building a single bundle (e. g. for Angular Elements):
npm i ngx-build-plus
Update application's builder section within the angular.json file so that it points to ngx-build-plus:
"builder": "ngx-build-plus:build",
Add script in package.json to run builder:
"build:ngx": "ng build --prod --output-hashing none --single-bundle true"
If required, Combine scripts.js and main.js in the created dist folder by creating a js file "concat_ngx.js":
const fs = require('fs-extra');
const concat = require('concat');
(async function build() {
const files = [
'./dist/<your_project>/scripts.js',
'./dist/<your_project>/main.js',
]
await fs.ensureDir('elements_ngx')
await concat(files, 'elements_ngx/combined-script.js');
})()
Run file to get single js file:
node concat_ngx.js
Use js file in any Angular/Other project to use the custom component created.
But the problem here is I have to change the component bootstrap every time in app-module.ts
I needed an automated way to change the bootstrapping in app-module.ts at runtime.
But the problem here is I have to change the component bootstrap every time in app-module.ts
I needed an automated way to change the bootstrapping in app-module.ts at runtime.
In Angular 7, Add Default or Automatic bootstrapping :-
It is the default way an angular application bootstraps and main.ts holds the starting point of an application.
platformBrowserDynamic().bootstrapModule(AppModule);
For more information see here: -https://medium.com/learnwithrahul/ways-of-bootstrapping-angular-applications-d379f594f604
ng serve -o app-one
or
ng serve -o app-two
For more information see here https://medium.com/#klauskpm/change-the-default-angular-project-27da8fca8721
I have an aurelia application running in electron. My source files are typescript and I have ambient typings for electron and node.
Because I know I'm compiling for use on electron, I am transpiling my typescript to es6 and with System module loading; this means I can turn system.js's transpiler off. I'm using system.js and jspm because that is approach Aurelia has been pushing.
So in my ts files: I would like to be able to do:
import {remote} from 'electron';
Unfortunately, system.js does not know anything about the module electron and fails during runtime. TypeScript on the other hand is perfectly happy because I've set up the typings for electron and node; I get full intellisense in VSCode too.
note: if you attempt to do var electron = require('electron'); in the header, system.js interferes with it and it fails to load. You can place that 'require('electron')' within a class or function and it will work, but I don't find this ideal.
Question: How can I get system.js to correctly return the 'electron' module that is only available when you run the app in electron itself?
A solution --hopefully there is a better way-- I've come up with is to shim the electron module for system.js and link it directly to the contents of require('electron'):
electron.js
System.register([], function (exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var electron;
return {
setters: [],
execute: function () {
electron = require('electron');
exports_1("default", electron);
Object.keys(electron).forEach(function (key) {
exports_1(key, electron[key]);
});
}
}
});
this effectively wraps the internal electron module and allows system.js to know about it. It works; but hopefully there is a more elegant/built-in way that others know of.
You don't need any mappings or changes to the typescypt as import {remote} from 'electron' will attempt to resolve electron.js as a last resort.
I am building Firefox extension, that creates single XMPP chat connection, that can be accessed from all tabs and windows, so I figured, that only way to to this, is to create connection in javascript module and include it on every browser window. Correct me if I am wrong...
EDIT: I am building traditional extension with xul overlays, not using sdk, and talking about those modules: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules
So I copied Strophe.js into js module. Strophe.js uses code like this:
/*_Private_ function that creates a dummy XML DOM document to serve as
* an element and text node generator.
*/
[---]
if (document.implementation.createDocument === undefined) {
doc = this._getIEXmlDom();
doc.appendChild(doc.createElement('strophe'));
} else {
doc = document.implementation
.createDocument('jabber:client', 'strophe', null);
}
and later uses doc.createElement() to create xml(or html?) nodes.
All worked fine, but in module I got error "Error: ReferenceError: document is not defined".
How to get around this?
(Larger piece of exact code: http://pastebin.com/R64gYiKC )
Use the hiddenDOMwindow
Cu.import("resource://gre/modules/Services.jsm");
var doc = Services.appShell.hiddenDOMWindow.document;
It sounds like you might not be correctly attaching your content script to the worker page. Make sure that you're using something like tabs.attach() to attach one or more content scripts to the worker page (see documentation here).
Otherwise you may need to wait for the DOM to load, waiting for the entire page to load
window.onload = function ()
{
Javascript code goes here
}
Should take at least diagnose that issue (even if the above isn't the best method to use in production). But if I had to wager, I'd say that you're not attaching the content script.