Gather Layer Borders data through Javascript

I am writing an own tool for profiling my web performance issues. I spotted an necessity to observer amount of separate composite layers on my website. I am looking through web APIs on MDN, but I can’t find any suitable API. Do you know if there is any possibility to gather that data on website, through javascript?
To be specific i need the data displayed inside the ‘Layers borders’ option located inside ‘Rendering’ tab in Chome Developer Tools.

Thanks.

Addon – unable to add module in content_script for firefox addon

Below is the project structure of a addon I’m trying to develop.

.
├── sc_back.js
├── sc_cont.js
├── icons
│   ├── addon
│   │   ├── icon-48.png
│   │   └── icon-96.png
│   └── context
│       ├── d-16.png
│       ├── d-32.png
│       ├── e-16.png
│       └── e-32.png
├── manifest.json
├── modules
│   └── sc_de.js
└── popup
    ├── action.css
    ├── action.html
    └── action.js

There is some JS code that is redundant between content script sc_cont.js and popup action script in popup/action.js so I decided to move that redundant part into a separate folder at modules/sc_de.js.

I added below lines at my content_script and at module script:

//sc_cont.js
import { xyz } from './modules/sc_de.js'

//modules/sc_de.js
export const xyz = {...}

I tried adding the modules script in manifest.json in the content_script array but it’s not working. Haven’t tried in web_accessible_resources as this is not supposed to be accessible from the DOM.

Problem is when I launch the addon debugger, it shows the following error:

SyntaxError: import declarations may only appear at top level of a module
SyntaxError: export declarations may only appear at top level of a module

How do I resolve these errors to make the addon work? Also, do I need to do anything special in case of popup/action.js as well?

ES6 (React) in Chrome debugger not working

Chrome-Screen-shot

Hi there, as you may see in the screen capture. I have a snippet of javascript code (ES6/React) opening in the latest Chrome (66.0.3359.170) developer tool.

Part of the code shown correctly as Javascript Code, however from line 31, the code looks like some kind of plain text and there is no way to inspect into the inputs and variables.

Anyone know how to fix it? BTW, latest FireFox works fine in my environment.

Thanks

FireFox-Screen-Shot

Override document.location.replace with document.location.assign in Chrome

I am asking this for personal user. I have full admin access and can write a chrome plugin or do anything else required. I don’t like this and prefer to see all history items. Is it possible to override it locally for myself.

How to import ES6 modules in content script for Chrome Extension

In Chrome 61 there was added support for modules in JavaScript. Right now I am running Chrome 63.

I am trying to figure out how to use import/export syntax in Chrome extention content script to use modules.

In manifest.json:

“content_scripts”: [
{

        "js": [
            "content.js"
        ],

In my-script.js in same directory as content.js

'use strict';

const injectFunction = () => window.alert('hello world');

export default injectFunction;

In content.js

'use strict';

import injectFunction from './my-script.js';
injectFunction();

I receive this error:
Uncaught SyntaxError: Unexpected identifier

If I change the import syntax into import {injectFunction} from './my-script.js'; I get this error: Uncaught SyntaxError: Unexpected token {

Is there some issue with using this syntax in content.js in Chrome extention since in HTML you have to use

Unchecked runtime.lastError while running input.ime.sendKeyEvents: Engine is not available

I have this code:

let ime_api = chrome.input.ime;

export const sendKey = (options, cb = null) => {
    return ime_api.sendKeyEvents(options, cb);
};

export const sendSpaceKey =  (cb) => {
    sendKey({
        contextID: 0,
        keyData: [{
            type: 'keyup',
            requestId: 'fewfavoihifgyiurhs',
            key: ' ',
            code: 'Space',
        },{
            type: 'keydown',
            requestId: 'gjsghgusyrurgfkeufygsfr',
            key: ' ',
            code: 'Space',
        }]
    }, cb);
};

sendSpaceKey(() => console.log('Space clicked'));

Chrome return me:

Unchecked runtime.lastError while running input.ime.sendKeyEvents: Engine is not available

enter image description here

Why?

Can’t get references to es6 classes in chrome extensions

I’m currently trying to update my chrome extension with es6 classes. It works fine in the context of the background scripts. But I can’t access this classes from within the ui page (i.e. the extension’s popup) using chrome.extension.getBackgroundPage().

background.js

function Foo() { ... }
class Bar { ... }

popup.js

var bg = chrome.extension.getBackgroundPage();
console.log(bg.Foo) // function
console.log(bg.Bar) // undefined

I found this simple workaround:

background.js

class Bar {}
var export = { Bar : Bar };

popup.js

var bg = chrome.extension.getBackgroundPage();
console.log(bg.export.Bar) // class

Any ideas why it’s not possible to get direct access to classes via the ‘bg’ object?

Chrome console bug?

This question is not of any doubt or problem. Apparently it seems that I have stumbled upon a bug maybe on chrome console,

I use this code:

console.log("Before: ", this.selectedScorecard.scorecard_attributes);
let attribute = this.selectedScorecard.scorecard_attributes.find(item => item.id === null || item.id === undefined)

if(attribute) {
   let length = this.selectedScorecard.scorecard_attributes.length;
   this.selectedScorecard.scorecard_attributes.splice(length-1, 1);
   console.log("After: ", this.selectedScorecard.scorecard_attributes);
}

Okay so the attribute is an array and it’s an array of length 2 initially.
Now I’m splicing one item from the array and printing it’s value before and after the splice.

In the chrome console in the snippet before the array it shows (2) indicating the length as 2 but in the array itself it shows the length as 1 and also only one item in the “Before console of the array”
while things are obviously as expected in the “After console”
I’m attaching an image for better understanding
enter image description here

I’m curious, does anyone have any idea about this? Does anyone face this before or am I only the one noticing it?

Array.prototype.map.call not working for getElementsByClassName objects

class_name = document.getElementsByClassName('image');
const map = fn => x => Array.prototype.map.call(x, fn);
map(img => {
console.log(img);
img.addEventListener('mouseover', (e) => {
global = e.target.src;
calledsomething(global);
     });
  })(class_name);

I’m trying to make a simple chrome extension but Array.prototype.map.call doesn’t seems to be called. console.log(img) doesn’t display anything.
I tested my code using getElementsByTagName('img') instead of getElementsByClassName and it works.

What might be the problem?