We have a React js site that uses the webpack-dev-server component. When I load the regular version of the site, everything seems to work fine. The problem is that when I load the webpack-dev-server version, I am unable to click on any elements on the screen.
After a little debugging, it looks like it is caused by the -index of the overlaying iframe being set to -1.
This thread seems to be the same issue, but their solution of changing the "inline" property to true doesn't fix anything for me.
Has anyone else had issues like this?
I'm experiencing the same issue for the exact same reason.
I followed your link and it seems like their webpack-dev-server configuration is handled differently than vanilla webpack.
In order to get the webpack-dev-server running in inline mode, the webpack configuration should have something similarly to:
webpackConfig.devServer = {
inline: true
}
As far as I can tell, the webpack dev server will change it's entry from localhost:8080/webpack-dev-server to localhost:8080/ and provide the live reloading script in the bundled JavaScript files.
In my case, I wanted my example page (~/index.html) to be interactive. Regardless of the inline mode setting, I can just go to localhost:8080/index.html. However, with inline mode enabled, the page auto-reloads on source code changes (all notifications are provided via the dev console).
This strange bug is affecting a project using nextjs version 7.0.2.
Setting the webpack config did not work.
We've fixed it with this hack:
if (process.env.NODE_ENV !== 'production' && typeof window !== undefined) {
// Select the node that will be observed for mutations
var targetNode = window.document.getElementsByTagName('body')[0];
// Options for the observer (which mutations to observe)
var config = { childList: true, subtree: true };
// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
for (var mutation of mutationsList) {
if (mutation.type == 'childList') {
var iframe = document.getElementsByTagName('iframe')[0];
if (iframe && iframe.style.zIndex > -1) {
iframe.style.zIndex = Math.min(-iframe.style.zIndex, -2);
}
}
}
};
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
// observer.disconnect();
}
Related
Here is a block of code from my application Codey.
src/main.py
// Show window once it has finished initialising
docsWindow.once("ready-to-show", () => {
if (darkMode) {
docsWindow.webContents.send("dark-mode:toggle");
}
if (!isDarwin) {
docsWindow.webContents.send("platform:not-darwin");
}
docsWindow.webContents.send("docs:jump", section);
docsWindow.show();
});
src/docs/renderer.js
window.api.darkMode.toggle.receive(toggleDarkMode);
When darkMode = true, toggleDarkMode is never run.
My application has two different windows - an editor and a docs window. For both windows, on the "ready-to-show" event, "dark-mode:toggle" is sent to the renderer process. However, the docs window fails to run the toggleDarkMode function whilst it works for the editor window.
Note: The application must be packaged using "yarn package" as some features do not work in the dev environment.
Any help will be much appreciated.
(Repo: https://github.com/Liamohara/Codey)
For anyone that's interested. I found a solution to my issue.
src/main.py
// Show window once it has finished initialising
- docsWindow.once("ready-to-show", () => {
+ docsWindow.webContents.once("did-finish-load", () => {
if (darkMode) {
docsWindow.webContents.send("dark-mode:toggle");
}
if (!isDarwin) {
docsWindow.webContents.send("platform:not-darwin");
}
docsWindow.webContents.send("docs:jump", section);
docsWindow.show();
});
In the docs window, there is more HTML content to be renderered than in the editor window. As a result, the DOM takes longer to load and the "ready-to-show" event is emitted before it has finished. Using the "did-finish-load" event, ensures that the API functions are not called before the DOM has finished loading.
I was thinking of using React to develop a chrome extension. This app would need to check for any DOM changes on the current web page the user is on.
I have always used react to check DOM updates within the react app itself, is it possible to check the DOM of web pages with a react chrome extension?
EDIT: I tried to use Mutation Observer but its not producing any results here.
var twitter = document.querySelector('#tweet-box-home-timeline > div'); //twitter time-line specific HTML
var observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
console.log(mutation.type); //should log mutation type
console.log('hello'); // should also log
});
});
var config = {characterData: true, subtree: true};
observer.observe(twitter, config);
//observer.disconnect();
}
EDIT2: I got it, thanks!
New/working code:
$(document).keypress(function() {
var twitter = document.querySelector('#tweet-box-home-timeline > div');
new MutationObserver(function() {
console.log(twitter.innerHTML);
}).observe(twitter, {characterData: true,childList: true, subtree: true});
});
}
I have an browser extension for Google Calendar, where I observe the DOM to gather events that are being viewed with:
// content.js
const calendarContainer = document.getElementById('gridcontainer');
const observer = new MutationObserver(mutations => {
// just for test
console.log('content', mutations);
}
observer.observe(calendarContainer, {
childList: true,
characterData: true,
subtree: true
});
It works correctly in "classic" Calendar, but since the last update to Material design, DOM structure is different. So, I tried to change observed element accordingly:
// content.js
const calendarContainer = document.querySelector('div[role="main"]');
Even though I switch between week/day view, schedule or between dates, I cannot receive any new mutations besides first load of the page (after refresh). If you look on the source code trough Developer Tools you can see that DOM is changing, but Observer is somehow not able to see it.
Any thoughts?
According to wOxxOm comment, I have changed it to observe the parentElement, which is not replaced between different calls, and it's working.
I am trying to use a MutationObserver inside my addon. Therefore I inject a content-script which then sets the observer. This somehow seems to work, also the detected mutations seem not be be serializable to JSON.
But actually I want to use this library for monitoring mutations. Explicitly this one is officially mentioned by Mozilla regarding mutation monitoring in addons. But this doesn't work at all.
So anybody got a working example for a working mutation-observer (better mutation-summary - see link) inside a content-script?
My code looks like this:
var observer = new MutationObserver(function (mutations) {
self.port.emit("domModified", mutations); //I gets received as 'Array [{}]'
mutations.forEach(function (mutation) {
console.log(mutation.type); //printing mutation results in {}, printing mutation.type results in an actual string
console.log(mutation.target);
console.log(mutation.addedNodes.length);
});
});
observer.observe(unsafeWindow.document.body, {
attributes: true,
subtree: true,
characterData: true,
childList: true
});
This somehow seems to work, also the detected mutations seem not be be serializable to JSON.
Mutations are not serializable, especially because they contains nodes. If you need to pass something from the content script, to the main add-on code, you need to be sure they're JSONable values.
So anybody got a working example for a working mutation-observer (better mutation-summary - see link) inside a content-script?
I never used the library you mentioned, but I used mutation observers quite a lot; and they're working quite fine. You can see an example here: https://github.com/ZER0/tweet-to-read It basically adds a button to every tweet in the stream that contains an external URL; and I needed the mutation observer to add the buttons also in future tweets. You can have a look to the implementation here: https://github.com/ZER0/tweet-to-read/blob/master/data/observable.js
Hope it helps.
I am trying to listen for changes to settings in firefox's about:config that the user could have changed while my addon is running. The settings in question are part of the browser and not created by my addon.
I can read and set them manually when the user has used my addon with no problems using the "preferences/service" module, but I want to be able to make the appropriate changes in my addon if the user has changed a setting in about config independently of my addon.
The "simple-prefs" module provides a listener but that is only for settings specific to your application, like "extension.myaddon.mypreference" where as the settings I need to watch are like "network.someoptionhere"
If someone could point me in the right direction as to how I would go about this I would greatly appreciate it.
You'll need to use some XPCOM, namely nsIPrefService/nsIPrefBranch (e.g. via Services.jsm). This is the same stuff that preferences/service and simple-prefs wraps.
Here is a full example:
const {Ci, Cu} = require("chrome");
const {Services} = Cu.import("resource://gre/modules/Services.jsm", {});
function observe(subject, topic, data) {
// instanceof actually also "casts" subject
if (!(subject instanceof Ci.nsIPrefBranch)) {
return;
}
console.error(subject.root, "has a value of", subject.getIntPref(""), "now");
}
var branch = Services.prefs.getBranch("network.http.max-connections")
branch.addObserver("", observe, false);
exports.onUnload = function() {
// Need to remove our observer again! This isn't automatic and will leak
// otherwise.
branch.removeObserver("", observe);
};