Chrome Extension: unable to populate multiple buttons in popup

I’m having trouble with displaying buttons in the popup for my chrome extension. I am able to display one button when the user creates it, but I am not able to display multiple buttons.

I am trying to use document.querySelectorAlland document.getElementById().appendChild() to select all of the id’s named button in popup.html and would then append a new button to the existing button.

popup.html:


    
        
        
    
    
        

popup.js:

document.addEventListener("DOMContentLoaded", function ()
{
    /* checks and displays if storage is empty */
    chrome.storage.local.get("groupCount", function(groups)
    {
        var totalGroups = groups.groupCount;

        if (totalGroups == 0)
        {
            document.getElementById("buttons").innerHTML = " Empty! ";
            document.getElementById("buttons").style.color = "grey";
        }
    })

    /* loops through divs that contain the button id to go through buttons */
    var buttons = document.querySelectorAll("#buttons");
    for (var i = 0; i < buttons.length; i++) 
    {
        buttonss[i].addEventListener("click", createButtons);
    }
})

/* creates the buttons */
function createButtons()
{
    chrome.storage.local.get("groupCount", function(groups)
    {
        var totalGroups = groups.groupCount;

        for (var i = 0; i < totalGroups; i++)
        {
            getGroup(i);
        }
    })
}

/* creates and adds the button to the list */
function getGroup(i)
{
    chrome.storage.local.get(["groupName" + i, "tabName" + i, "tabUrl" + i, "tabCount" + i, "groupCount" + i], function(group)
    {
        var groupButton = document.createElement("button");
        groupButton.id = "btn" + i;   // button id
        groupButton.type = "button";
        groupButton.innerHTML = group["groupName" + i];   // displays name of the button
        groupButton.name = "btn" + i;
        groupButton.title = group["groupName" + i];   // name of the button
        // put button in popup
        document.getElementById("buttons").appendChild(groupButton);
    })
}

popup.css:

#buttons
{
    cursor: pointer;
    display: inline-block;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    border-color: lightblue;
    background-color: white;

    padding: 24px 32px 24px 60px;
    font-size: 12px;
    font-family: Verdana, sans-serif;
    text-align: center;
    text-decoration: none;
}

#buttons:hover 
{
    background: #aaaaaa;
}

How to get a Chrome web extension to read Chrome setting “Ask where to save each file before downloading”?

I was wondering if there was a way the extension could read whether the setting was on or off so that we could notify the user if it needs to be changed for use of the extension.
I have checked all over the internet to try to find an answer to this. All I found on Stack Overflow is that the extension cannot change this setting at all. I tried chrome.contentSettings and chrome.downloads, but neither worked for this situation.
The closest I got is that chrome.downloads can access the path to the default download file, which is the setting right above this one. Does anyone have any ideas on how to achieve this? Thanks

Chrome Developer Tools: Sources tab not refreshed after a while

Suddenly I am finding that the content in the Sources tab is not refreshed when a page is reloaded. It stays at some version and remains there, different from the newer content that is actually received and rendered or seen in Ctrl-U.

Breakpoints set earlier continue to break, but while I am stepping through the actual (invisible) code, visually it is stepping through the stale version which can be nonsensical.

If I close all my Chrome windows and restart again, it goes back to normal, but after a few reloads the problem is back again.

I have disabled all extensions except for Tunnelbear.

Is this a known problem and how can I solve this?

Artbees Themes Ken Theme VC Contact Form/Captcha Console Error: POST 500 (Internal Server Error)

Hello fellow developers and problem-solvers,

I’m having an issue with a WordPress website that uses the Contact Form with Captcha with the Ken Theme (Visual Composer) when submitting the form. I did some tests and every time I submit. I get a red line for the Captcha field.

captcha error on Contact Form WordPress Ken Theme Visual Composer

This link suggests installed the “Artbees Themes Captcha” plugin, but when searching the WordPress plugin directory, nothing is found:
https://themes.artbees.net/docs/contact-form-shortcode/

Here’s a screenshot of the error that I am getting.

Artbees Themes Ken Theme VC Contact Form/Captcha Console Error: POST 500 (Internal Server Error) )

I did searches for this particular error and I wasn’t able to find a solution.

Chrome-extension: Jquery.load a local html file that is embedded with extension

Trying to add a button with a content script with a local file.html that is embedded with the extension.

console.log(chrome.runtime.getURL("file.html"));
// Output: chrome-extension://jgadohdbhbbbnlbmaelmgpjccnhadenl/file.html
// If I go to this path it is displayed correctly

$('.theClass').load(chrome.runtime.getURL("file.html"));
// Output: GET chrome-extension://invalid/ 0 ()

$().append(“….”) works but I want to have an external html to be able to have code completion etc from the IDE.

Any ideas why load says the path is invalid?

Open Google Extension as Application

You can open extensions as applications using the GUI, but I cannot find the settings for it. They used to be under Chrome://Extensions, but the setting is not there any more.

You can also have the extension export a shortcut in the interface, but I just cannot find it.

Google Slides add-on top level menu

We are developing a Google Slides add-on and we need to add some custom top-level menus. The documentation on https://developers.google.com/apps-script/guides/menus says:

Scripts that are published as add-ons for Google Sheets, Docs, or Forms cannot create top-level custom menus.

But when I installed publicly available Poll Everywhere for Google Slides add-on, it added the Poll Everywhere menu as a top-level menu for all documents. How could be that possible?

Poll Everywhere top-level menu

Implement custom protocol handler

I want to create a chrome extension which will allow to open URLs like something://abc.def but not simply redirect it to some other http URL like Navigator.registerProtocolHandler() nor open some application.

I want to send whole raw HTTP request

GET / HTTP/1.1
...

to websocket and then render received whole raw HTTP response (headers, body, etc).

I couldn’t find documentation for this, unfortunately.

TL;DR I want to redirect some protocol requests to websocket and render page from it’s response.

DevTools console text is cut when zoomed in

Google Chrome Version 67.0.3396.99 (Official Build) (64-bit)

I use Google Chrome DevTools to make some screencasts about JavaScript and I’m used to zoom in a lot to make mobile friendly screencasts.

Today I zoom in and my text is now cut off at the bottom when I type in the console.

Does anyone have the same problem? Here is a screenshot:

Screenshot

I zoomed in like 5 or 6 times. My default font size is not 16px but 18px, I changed it back to 16px but it didn’t change a thing, the text is still cut off.

How can I fix this?

Can call headless from dos command but not from powershell

In dos when I paste this command it works:

"C:Program Files (x86)GoogleChromeApplicationchrome.exe" https://google.com --screenshot=c:testgoogle.png --headless --hide-scrollbars --window-size=1920,1080 --disable-gpu &

When I do the same in Powershell it doesn’t. I guess my syntax not right ?