Rectangle 27 3

Extension page inside a tab

This is pretty easy to achieve: all you have to do is to create a basic extension with a folder containing the page.html and the relative JavaScript and CSS files; then you can use the chrome.tabsAPI to create a new tab and display the page.html inside it.

Following these steps, you'll be able to open a new tab containing a page hosted in your extension folder, which will have an URL like chrome-extension://<id>/page/page.html:

Create an extension and the relative files for the manifest, background and the page you want to display. The extension's directory should then look like this:

<root/>:
  - background.js
  - manifest.json
  - <page/>:
      - page.html
      - page.js
      - page.css
  • Create a simple manifest.json file declaring the background page: { "manifest_version": 2, "name": "Some test", "version": "0", "background": { "scripts": ["/background.js"] } }

Create the background.js script, where you will create the tab:

chrome.tabs.create({url: "/page/page.html"});
  • Create the page.html file, which is just a regular html page: <!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" type="text/css" href="page.css"/> </head> <body> <script src="page.js"></script> </body> </html>

Create the page.js script, which will run inside your page.html, and where you can do whatever you want:

var h = document.createElement('h1');

h.textContent = 'Hello World!';
document.body.appendChild(h);

The result of the above will be something like this:

The "tabs" permission is not required for the create method.

this is exactly what I wanted. Many thanks! chrome extensions rocks

javascript - Chrome extension as static server - Stack Overflow

javascript google-chrome-extension
Rectangle 27 14

The tabs are meant to have their own tab icon. So you can't put the login page inside the tabs abstract view without creating a tab icon for it.

Instead of putting the login page under the tab abstract view, you should just put a separate tabbed navigation for the login page.

Load the following view into your index page.

<ion-view title="'Login'">

<ion-content has-header="true" has-footer="true" padding="true">

Login page content goes here 

</ion-content>

<div class="tabs tabs-icon-left">
  <a class="tab-item" href="#/tab/home">
   Home
  </a>
  <a class="tab-item" href="#/tab/about">
    About
  </a>
</div>

</ion-view>

Ah thank you! This is exactly what I was looking to do. Unfortunately it seems I don't have the rep yet to upvote you but thanks. Perfect

Angularjs + Ionic Framework: How to create a new route that shows the ...

angularjs ionic-framework
Rectangle 27 14

The tabs are meant to have their own tab icon. So you can't put the login page inside the tabs abstract view without creating a tab icon for it.

Instead of putting the login page under the tab abstract view, you should just put a separate tabbed navigation for the login page.

Load the following view into your index page.

<ion-view title="'Login'">

<ion-content has-header="true" has-footer="true" padding="true">

Login page content goes here 

</ion-content>

<div class="tabs tabs-icon-left">
  <a class="tab-item" href="#/tab/home">
   Home
  </a>
  <a class="tab-item" href="#/tab/about">
    About
  </a>
</div>

</ion-view>

Ah thank you! This is exactly what I was looking to do. Unfortunately it seems I don't have the rep yet to upvote you but thanks. Perfect

Angularjs + Ionic Framework: How to create a new route that shows the ...

angularjs ionic-framework
Rectangle 27 2

<p:tabView id="tabView1">
     <p:ajax event="tabChange" listener="#{yourBean.onTabChange}" update=":tab2"/>
...
  • event: defines what should happen to start the ajax request
  • update: does a re-render on the given id
public void onTabChange(TabChangeEvent event) {  
    // ... 
}

event provides the selected tab:

event.getTab()

you could now rerender all of your tabs with:

... update=":tabInfo, :tab2, :tab3"

or you store the selected tab in your bean and do something like this:

... update="#{yourBean.selectedTab}"
public String getSelectedTab(){
     // selectedTab is a variable that should be set onTabChange()
     return selectedTab;
}

Thanks for your answer, but what happen If I need to reload page on tab3, and what should be inside method onTabChange?

Thanks very much I would try this.

java - TabView primefaces 3.1 Reload a page inside a tab and call agai...

java jsf tabs primefaces tabview
Rectangle 27 15

For your panel or a page from within your extension loaded in a tab

In Firefox, your code works (outputs to console), as it is written in the question.

If you are not seeing it in the console, then you are, probably, looking at the wrong console.

Mozilla describes what extension output can be seen in which console in their Debugging page.

You should be using the Browser Console. You can access it from ToolsWeb DeveloperBrowser Console (keyboard shortcut Ctrl-Shift-J, or Cmd-Shift-J on Mac).

If you have it enabled, you could also use the Browser Toolbox console. You can access it from ToolsWeb DeveloperBrowser Toolbox (keyboard shortcut Ctrl-Alt-Shift-I; On a Mac: Cmd-Alt-Shift-I).

To debug your add-on you can use the Add-on Debugger. You can access it though about:debuggingDebug.

You, probably, are looking at the Web Console (keyboard shortcut F12) which is associated with only a single tab. This is what you want when debugging a webpage, but not an add-on. For a content script which is injected in that tab, the console.log() output will show up in this console. However, you will not see output from any other portion of your add-on (e.g. not content scripts in other tabs, not background scripts, etc.).

Showing the correct console for your extension is a bit more complex in Chrome. Console output will show up in only one of multiple possible places, depending on from what context the console.log() was executed. Each of the following DevTools are independent of each other and are displayed in separate windows, or tabs. Displaying in the associated tab (bottom or side) is the default for the DevTools associated with web pages and content scripts, because those are specific to the tab. For the web page/content script DevTools, you have the option of having it displayed in its own separate window, or docked inside the tab (side or bottom).

As Srujan Reddy explained, you have to go through multiple selections on a drop-down menu, to get to the chrome://extensions page (or you can type that in by hand as the URL, or use a bookmark) then select both a checkbox ("Developer mode") and then click on the "background page" link. Then, you have to select the "Console" tab on the window that pops up.

Output will be shown in the regular web console (in the web Developer Tools). You can open it by pressing F12 (or other shortcuts) in the webpage in which your content script was injected. Each web console will only show the output from the scripts injected in that tab.

Doing the above with show the console.* output from your extension, but will result in the console JavaScript command line, debugger, etc. being in the context of the page, not the content script.

If you want to use the console JavaScript command line in the context of the content scripts which are injected into a web page, you need to select your extension's content script context from the drop-down menu in the upper left of the Console window. This drop-down menu will normally start with the value "top". The drop down will have selections for each of the content script contexts (one per extension that has script(s) injected).

Right-click on your browserAction button and select "Inspect Popup". Alternately, right-click within the popup and select "Inspect". Either will open the DevTools for the popup page. The popup will be kept open under more conditions than it normally would, but will still be closed if you switch tabs, etc.

Right-click within the main content of the Options popup (not the title bar) and select "Inspect". This will open the DevTools for the options page.

When the panel or tab is focused, you can open the DevTools by pressing F12 (or other shortcuts), or by opening the context menu (right-click) and selecting "Inspect".

@gal007, What are you not seeing? In which console? I'm seeing popup console.log() output just fine in Firefox Developer Edition v55b3 in the Browser Console, the Browser Toolbox and the Add-on Debugger. In Firefox Nightly v56, I also see popup console.log() output in all three tools. I did experience problems with the Browser Toolbox and Add-on Debugger when I tried to use them simultaneously in multiple instances of Firefox. However, they were broken completely (in all but the first instance started, when trying to use >1 instance of Firefox using those tools), not just for popup output.

Google Chrome / Firefox do not see extension output in console - Stack...

google-chrome-extension firefox-addon google-chrome-devtools firefox-developer-tools firefox-webextensions
Rectangle 27 15

For your panel or a page from within your extension loaded in a tab

In Firefox, your code works (outputs to console), as it is written in the question.

If you are not seeing it in the console, then you are, probably, looking at the wrong console.

Mozilla describes what extension output can be seen in which console in their Debugging page.

You should be using the Browser Console. You can access it from ToolsWeb DeveloperBrowser Console (keyboard shortcut Ctrl-Shift-J, or Cmd-Shift-J on Mac).

If you have it enabled, you could also use the Browser Toolbox console. You can access it from ToolsWeb DeveloperBrowser Toolbox (keyboard shortcut Ctrl-Alt-Shift-I; On a Mac: Cmd-Alt-Shift-I).

To debug your add-on you can use the Add-on Debugger. You can access it though about:debuggingDebug.

You, probably, are looking at the Web Console (keyboard shortcut F12) which is associated with only a single tab. This is what you want when debugging a webpage, but not an add-on. For a content script which is injected in that tab, the console.log() output will show up in this console. However, you will not see output from any other portion of your add-on (e.g. not content scripts in other tabs, not background scripts, etc.).

Showing the correct console for your extension is a bit more complex in Chrome. Console output will show up in only one of multiple possible places, depending on from what context the console.log() was executed. Each of the following DevTools are independent of each other and are displayed in separate windows, or tabs. Displaying in the associated tab (bottom or side) is the default for the DevTools associated with web pages and content scripts, because those are specific to the tab. For the web page/content script DevTools, you have the option of having it displayed in its own separate window, or docked inside the tab (side or bottom).

As Srujan Reddy explained, you have to go through multiple selections on a drop-down menu, to get to the chrome://extensions page (or you can type that in by hand as the URL, or use a bookmark) then select both a checkbox ("Developer mode") and then click on the "background page" link. Then, you have to select the "Console" tab on the window that pops up.

Output will be shown in the regular web console (in the web Developer Tools). You can open it by pressing F12 (or other shortcuts) in the webpage in which your content script was injected. Each web console will only show the output from the scripts injected in that tab.

Doing the above with show the console.* output from your extension, but will result in the console JavaScript command line, debugger, etc. being in the context of the page, not the content script.

If you want to use the console JavaScript command line in the context of the content scripts which are injected into a web page, you need to select your extension's content script context from the drop-down menu in the upper left of the Console window. This drop-down menu will normally start with the value "top". The drop down will have selections for each of the content script contexts (one per extension that has script(s) injected).

Right-click on your browserAction button and select "Inspect Popup". Alternately, right-click within the popup and select "Inspect". Either will open the DevTools for the popup page. The popup will be kept open under more conditions than it normally would, but will still be closed if you switch tabs, etc.

Right-click within the main content of the Options popup (not the title bar) and select "Inspect". This will open the DevTools for the options page.

When the panel or tab is focused, you can open the DevTools by pressing F12 (or other shortcuts), or by opening the context menu (right-click) and selecting "Inspect".

@gal007, What are you not seeing? In which console? I'm seeing popup console.log() output just fine in Firefox Developer Edition v55b3 in the Browser Console, the Browser Toolbox and the Add-on Debugger. In Firefox Nightly v56, I also see popup console.log() output in all three tools. I did experience problems with the Browser Toolbox and Add-on Debugger when I tried to use them simultaneously in multiple instances of Firefox. However, they were broken completely (in all but the first instance started, when trying to use >1 instance of Firefox using those tools), not just for popup output.

Google Chrome / Firefox do not see extension output in console - Stack...

google-chrome-extension firefox-addon google-chrome-devtools firefox-developer-tools firefox-webextensions
Rectangle 27 14

For your panel or a page from within your extension loaded in a tab

In Firefox, your code works (outputs to console), as it is written in the question.

If you are not seeing it in the console, then you are, probably, looking at the wrong console.

Mozilla describes what extension output can be seen in which console in their Debugging page.

You should be using the Browser Console. You can access it from ToolsWeb DeveloperBrowser Console (keyboard shortcut Ctrl-Shift-J, or Cmd-Shift-J on Mac).

If you have it enabled, you could also use the Browser Toolbox console. You can access it from ToolsWeb DeveloperBrowser Toolbox (keyboard shortcut Ctrl-Alt-Shift-I; On a Mac: Cmd-Alt-Shift-I).

To debug your add-on you can use the Add-on Debugger. You can access it though about:debuggingDebug.

You, probably, are looking at the Web Console (keyboard shortcut F12) which is associated with only a single tab. This is what you want when debugging a webpage, but not an add-on. For a content script which is injected in that tab, the console.log() output will show up in this console. However, you will not see output from any other portion of your add-on (e.g. not content scripts in other tabs, not background scripts, etc.).

Showing the correct console for your extension is a bit more complex in Chrome. Console output will show up in only one of multiple possible places, depending on from what context the console.log() was executed. Each of the following DevTools are independent of each other and are displayed in separate windows, or tabs. Displaying in the associated tab (bottom or side) is the default for the DevTools associated with web pages and content scripts, because those are specific to the tab. For the web page/content script DevTools, you have the option of having it displayed in its own separate window, or docked inside the tab (side or bottom).

As Srujan Reddy explained, you have to go through multiple selections on a drop-down menu, to get to the chrome://extensions page (or you can type that in by hand as the URL, or use a bookmark) then select both a checkbox ("Developer mode") and then click on the "background page" link. Then, you have to select the "Console" tab on the window that pops up.

Output will be shown in the regular web console (in the web Developer Tools). You can open it by pressing F12 (or other shortcuts) in the webpage in which your content script was injected. Each web console will only show the output from the scripts injected in that tab.

Doing the above with show the console.* output from your extension, but will result in the console JavaScript command line, debugger, etc. being in the context of the page, not the content script.

If you want to use the console JavaScript command line in the context of the content scripts which are injected into a web page, you need to select your extension's content script context from the drop-down menu in the upper left of the Console window. This drop-down menu will normally start with the value "top". The drop down will have selections for each of the content script contexts (one per extension that has script(s) injected).

Right-click on your browserAction button and select "Inspect Popup". Alternately, right-click within the popup and select "Inspect". Either will open the DevTools for the popup page. The popup will be kept open under more conditions than it normally would, but will still be closed if you switch tabs, etc.

Right-click within the main content of the Options popup (not the title bar) and select "Inspect". This will open the DevTools for the options page.

When the panel or tab is focused, you can open the DevTools by pressing F12 (or other shortcuts), or by opening the context menu (right-click) and selecting "Inspect".

@gal007, What are you not seeing? In which console? I'm seeing popup console.log() output just fine in Firefox Developer Edition v55b3 in the Browser Console, the Browser Toolbox and the Add-on Debugger. In Firefox Nightly v56, I also see popup console.log() output in all three tools. I did experience problems with the Browser Toolbox and Add-on Debugger when I tried to use them simultaneously in multiple instances of Firefox. However, they were broken completely (in all but the first instance started, when trying to use >1 instance of Firefox using those tools), not just for popup output.

Google Chrome / Firefox do not see extension output in console - Stack...

google-chrome-extension firefox-addon google-chrome-devtools firefox-developer-tools firefox-webextensions
Rectangle 27 13

For your panel or a page from within your extension loaded in a tab

In Firefox, your code works (outputs to console), as it is written in the question.

If you are not seeing it in the console, then you are, probably, looking at the wrong console.

Mozilla describes what extension output can be seen in which console in their Debugging page.

You should be using the Browser Console. You can access it from ToolsWeb DeveloperBrowser Console (keyboard shortcut Ctrl-Shift-J, or Cmd-Shift-J on Mac).

If you have it enabled, you could also use the Browser Toolbox console. You can access it from ToolsWeb DeveloperBrowser Toolbox (keyboard shortcut Ctrl-Alt-Shift-I; On a Mac: Cmd-Alt-Shift-I).

To debug your add-on you can use the Add-on Debugger. You can access it though about:debuggingDebug.

You, probably, are looking at the Web Console (keyboard shortcut F12) which is associated with only a single tab. This is what you want when debugging a webpage, but not an add-on. For a content script which is injected in that tab, the console.log() output will show up in this console. However, you will not see output from any other portion of your add-on (e.g. not content scripts in other tabs, not background scripts, etc.).

Showing the correct console for your extension is a bit more complex in Chrome. Console output will show up in only one of multiple possible places, depending on from what context the console.log() was executed. Each of the following DevTools are independent of each other and are displayed in separate windows, or tabs. Displaying in the associated tab (bottom or side) is the default for the DevTools associated with web pages and content scripts, because those are specific to the tab. For the web page/content script DevTools, you have the option of having it displayed in its own separate window, or docked inside the tab (side or bottom).

As Srujan Reddy explained, you have to go through multiple selections on a drop-down menu, to get to the chrome://extensions page (or you can type that in by hand as the URL, or use a bookmark) then select both a checkbox ("Developer mode") and then click on the "background page" link. Then, you have to select the "Console" tab on the window that pops up.

Output will be shown in the regular web console (in the web Developer Tools). You can open it by pressing F12 (or other shortcuts) in the webpage in which your content script was injected. Each web console will only show the output from the scripts injected in that tab.

Doing the above with show the console.* output from your extension, but will result in the console JavaScript command line, debugger, etc. being in the context of the page, not the content script.

If you want to use the console JavaScript command line in the context of the content scripts which are injected into a web page, you need to select your extension's content script context from the drop-down menu in the upper left of the Console window. This drop-down menu will normally start with the value "top". The drop down will have selections for each of the content script contexts (one per extension that has script(s) injected).

Right-click on your browserAction button and select "Inspect Popup". Alternately, right-click within the popup and select "Inspect". Either will open the DevTools for the popup page. The popup will be kept open under more conditions than it normally would, but will still be closed if you switch tabs, etc.

Right-click within the main content of the Options popup (not the title bar) and select "Inspect". This will open the DevTools for the options page.

When the panel or tab is focused, you can open the DevTools by pressing F12 (or other shortcuts), or by opening the context menu (right-click) and selecting "Inspect".

@gal007, What are you not seeing? In which console? I'm seeing popup console.log() output just fine in Firefox Developer Edition v55b3 in the Browser Console, the Browser Toolbox and the Add-on Debugger. In Firefox Nightly v56, I also see popup console.log() output in all three tools. I did experience problems with the Browser Toolbox and Add-on Debugger when I tried to use them simultaneously in multiple instances of Firefox. However, they were broken completely (in all but the first instance started, when trying to use >1 instance of Firefox using those tools), not just for popup output.

Google Chrome / Firefox do not see extension output in console - Stack...

google-chrome-extension firefox-addon google-chrome-devtools firefox-developer-tools firefox-webextensions
Rectangle 27 12

For your panel or a page from within your extension loaded in a tab

In Firefox, your code works (outputs to console), as it is written in the question.

If you are not seeing it in the console, then you are, probably, looking at the wrong console.

Mozilla describes what extension output can be seen in which console in their Debugging page.

You should be using the Browser Console. You can access it from ToolsWeb DeveloperBrowser Console (keyboard shortcut Ctrl-Shift-J, or Cmd-Shift-J on Mac).

If you have it enabled, you could also use the Browser Toolbox console. You can access it from ToolsWeb DeveloperBrowser Toolbox (keyboard shortcut Ctrl-Alt-Shift-I; On a Mac: Cmd-Alt-Shift-I).

To debug your add-on you can use the Add-on Debugger. You can access it though about:debuggingDebug.

You, probably, are looking at the Web Console (keyboard shortcut F12) which is associated with only a single tab. This is what you want when debugging a webpage, but not an add-on. For a content script which is injected in that tab, the console.log() output will show up in this console. However, you will not see output from any other portion of your add-on (e.g. not content scripts in other tabs, not background scripts, etc.).

Showing the correct console for your extension is a bit more complex in Chrome. Console output will show up in only one of multiple possible places, depending on from what context the console.log() was executed. Each of the following DevTools are independent of each other and are displayed in separate windows, or tabs. Displaying in the associated tab (bottom or side) is the default for the DevTools associated with web pages and content scripts, because those are specific to the tab. For the web page/content script DevTools, you have the option of having it displayed in its own separate window, or docked inside the tab (side or bottom).

As Srujan Reddy explained, you have to go through multiple selections on a drop-down menu, to get to the chrome://extensions page (or you can type that in by hand as the URL, or use a bookmark) then select both a checkbox ("Developer mode") and then click on the "background page" link. Then, you have to select the "Console" tab on the window that pops up.

Output will be shown in the regular web console (in the web Developer Tools). You can open it by pressing F12 (or other shortcuts) in the webpage in which your content script was injected. Each web console will only show the output from the scripts injected in that tab.

Doing the above with show the console.* output from your extension, but will result in the console JavaScript command line, debugger, etc. being in the context of the page, not the content script.

If you want to use the console JavaScript command line in the context of the content scripts which are injected into a web page, you need to select your extension's content script context from the drop-down menu in the upper left of the Console window. This drop-down menu will normally start with the value "top". The drop down will have selections for each of the content script contexts (one per extension that has script(s) injected).

Right-click on your browserAction button and select "Inspect Popup". Alternately, right-click within the popup and select "Inspect". Either will open the DevTools for the popup page. The popup will be kept open under more conditions than it normally would, but will still be closed if you switch tabs, etc.

Right-click within the main content of the Options popup (not the title bar) and select "Inspect". This will open the DevTools for the options page.

When the panel or tab is focused, you can open the DevTools by pressing F12 (or other shortcuts), or by opening the context menu (right-click) and selecting "Inspect".

@gal007, What are you not seeing? In which console? I'm seeing popup console.log() output just fine in Firefox Developer Edition v55b3 in the Browser Console, the Browser Toolbox and the Add-on Debugger. In Firefox Nightly v56, I also see popup console.log() output in all three tools. I did experience problems with the Browser Toolbox and Add-on Debugger when I tried to use them simultaneously in multiple instances of Firefox. However, they were broken completely (in all but the first instance started, when trying to use >1 instance of Firefox using those tools), not just for popup output.

Google Chrome / Firefox do not see extension output in console - Stack...

google-chrome-extension firefox-addon google-chrome-devtools firefox-developer-tools firefox-webextensions
Rectangle 27 4

In case your second page javascript is placed inside a HEAD content

If I understood you correctly, you are using ajax to load this page into the DOM? If this is true then I understand your problem. You see, when ajax is used for page loading only BODY content is loaded into the DOM.

You can fix your problem if you initialize your second html page javascript inside a first HTML file or move your SCRIPT block inside a second HTML BODY content.

Also, I have described this problem in my other ARTICLE with more details and few examples, or it can be found HERE.

This could also be a little different problem. You see, if you have 2 buttons with a same id, they are both inside a DOM structure. If you try to bind a click event on a second page button, that same event will be bound to the button on a first page. Because they have a same id jQuery will bound an event to the first button (with that id) found in the DOM.

To fix this problem you need to use a jQM constructor called active page. One more warning, next code example will work only in a page events initialized after a pageinit event, for example pagebeforeshow or pageshow events:

$(document).on('pagebeforeshow', '#yourPageID', function(){     
    // Registering button click  
    $(document).on('click', $.mobile.activePage.find('#myButtonID'), function(){
        // Do something
    });
});

This line of code:

$.mobile.activePage.find('#myButtonID')

Will only get button '#myButtonID' found in a current active page, no matter how many other buttons with a same id exist inside the DOM.

About your last questions. It doesn't matter which template structure you use (1 HTML with multiple pages or multiple HTML's), you just need to worry about things I mentioned before.

Phonegap - jquery Mobile : button click event not able catch in androi...

android jquery jquery-mobile cordova
Rectangle 27 4

When your page is inside an iframe, the Response.Redirect is only redirect the same page, that is in the iframe, not the parent one - one workaround is to register a javascript call, that can "say" to the parent window to redirect.

ClientScript.RegisterStartupScript(this.GetType(), "scriptid", 
           "window.parent.location.href='redirectpage.aspx'", true);

The same way you can call this script from any javascript code to say to the top window to redirect.

top.location.href = "redirect.aspx" ;

what does the "scriptid" represent? Is that just the name of the given ClientScript process that we are looking at? or is that name being referenced somewhere else? I'm assuming this goes into a conditional statement within a .cs file, right? Thanks for your solution by the way!

@blachawk The scriptid is just a random name that go together with the script. ClientScript check that name and avoid to add the same id more than one time.

javascript - ASP.NET How to redirect to another web site from a page i...

asp.net javascript html
Rectangle 27 1

The reason for your issue is that in the new angular-ui version, every tab content resides in each own new created child scope, so now changed values inside the tab scope (like myForm in your case) will not affect the parent scope. I edited your plnkr here, so that the ng-model is now $parent.myForm, which means it will evaluate any changes made in the child scope (inside the tab) also in the outer scope.

your plnkr still use old version angular ui (0.7). If I change to new version for your sample, it does not work.

I don't understand your plnkr, besides rename the form name from myForm to myFormValues, there is no other changes. How do you make the form model in the parent scope?

angularjs - angular ui version 0.10.0 breaks ng-form validation inside...

angularjs angular-ui
Rectangle 27 4

Opening a tab

Options page always in a tab:

open_in_tab
true
options_ui
"options_ui" : {
  "page": "options.html",
  "open_in_tab":true
}

This will result in your options page always opening in a tab. Both clicking on your extension's "Options" from within about:addons and using runtime.openOptionsPage() will result in your options page opening in a tab.

In a tab when normally your options page is within about:addons: You can open a new tab with whatever URL from within your extension you desire, including your options page, using tabs.create and runtime.getURL. Specifically for an options.html file located in the same directory as your manifest.json, the following works:

chrome.tabs.create({
    url: chrome.runtime.getURL('/options.html')
});

Does not need to be web accessible and loading JavaScript: You do not need the files to be declared as web accessible. The page runs in the background context so JavaScript is loaded by directly including the files in the src of a <script> tag (e.g. <script src="/options.js">). This is the same as you would do for a popup. This answer has an extension that uses the same HTML and JavaScript as both a popup and an options page. It does not, however, actually show opening that page as a tab, but it could be done with the above code.

Relative URLs will be relative to the current page within the extension.

Note: For all the different chrome.* API calls, Chrome and Firefox do not always resolve relative URLs in the same way. For example, it is different in each browser for chrome.executeScript().

Quick question. How can I get a content script to run on it. Specifying moz-extension://... in the matches array causes the extension to be invalid. Trying to set the scripts to be web-accessible and calling it inside of <script> tags also doesn't work.

@KnightYoshi, The page is not loaded in the content context. It is in the background page context. Thus, scripts are included directly as paths (not moz-extension://, but just /options.js) similar to what you would do with a popup page. This answer includes a page that is used as both an options page and a popup.

Thanks again! I'm quite new to the WebExtensions API, it's quite different than the SDK version.

@KnightYoshi, I'm glad I am able to help. Something I noticed I did not address from your question: You do not need to declare the resources as web accessible. I have added the info from my comments to the Answer.

openOptionsPage()

javascript - How to open a Firefox WebExtension options page as a tab,...

javascript firefox firefox-addon firefox-webextensions
Rectangle 27 74

The tab character is \t. Notice the use of " instead of '.

$chunk = "abc\tdef\tghi";

If the string is enclosed in double-quotes ("), PHP will interpret more escape sequences for special characters:

Also, let me recommend the fputcsv() function which is for the purpose of writing CSV files.

Notice the use of " instead of '.

+1 for the notice. Same problem when use '. It always escape my tabs.

string - PHP to write Tab Characters inside a file? - Stack Overflow

php string csv tsv
Rectangle 27 56

The issue is caused because dataTable must calculate its width - but when used inside a tab, it's not visible, hence can't calculate the widths. The solution is to call 'fnAdjustColumnSizing' when the tab shows.

This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed any other method whereby the table is in a hidden (display:none) element when it is initialised). The reason this requires special consideration, is that when DataTables is initialised and it is in a hidden element, the browser doesn't have any measurements with which to give DataTables, and this will require in the misalignment of columns when scrolling is enabled.

The method to get around this is to call the fnAdjustColumnSizing API function. This function will calculate the column widths that are needed based on the current data and then redraw the table - which is exactly what is needed when the table becomes visible for the first time. For this we use the 'show' method provided by jQuery UI tables. We check to see if the DataTable has been created or not (note the extra selector for 'div.dataTables_scrollBody', this is added when the DataTable is initialised). If the table has been initialised, we re-size it. An optimisation could be added to re-size only of the first showing of the table.

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

I also have the same issue with @John McC, however, I applied my datatable to a modal, i'm using bootstrap and I got stuck with this issue..do you know how to implement it using bootstrap modal instead of tabs?..i really need your help

window.resize

jQuery DataTables: control table width - Stack Overflow

jquery datatables jquery-datatables
Rectangle 27 56

The issue is caused because dataTable must calculate its width - but when used inside a tab, it's not visible, hence can't calculate the widths. The solution is to call 'fnAdjustColumnSizing' when the tab shows.

This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed any other method whereby the table is in a hidden (display:none) element when it is initialised). The reason this requires special consideration, is that when DataTables is initialised and it is in a hidden element, the browser doesn't have any measurements with which to give DataTables, and this will require in the misalignment of columns when scrolling is enabled.

The method to get around this is to call the fnAdjustColumnSizing API function. This function will calculate the column widths that are needed based on the current data and then redraw the table - which is exactly what is needed when the table becomes visible for the first time. For this we use the 'show' method provided by jQuery UI tables. We check to see if the DataTable has been created or not (note the extra selector for 'div.dataTables_scrollBody', this is added when the DataTable is initialised). If the table has been initialised, we re-size it. An optimisation could be added to re-size only of the first showing of the table.

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

I also have the same issue with @John McC, however, I applied my datatable to a modal, i'm using bootstrap and I got stuck with this issue..do you know how to implement it using bootstrap modal instead of tabs?..i really need your help

window.resize

jQuery DataTables: control table width - Stack Overflow

jquery datatables jquery-datatables
Rectangle 27 65

The problem is that you are violating manifest version 2's content security policy. To fix it all you have to do is get rid of inline script, in this case your background page. Turn it into a background script like this:

"background":{
  "scripts": ["background.js"]
},
chrome.browserAction.onClicked.addListener(function(activeTab){
  var newURL = "http://stackoverflow.com/";
  chrome.tabs.create({ url: newURL });
});

If, for some reason, you do need it to be a page, then simply include the script as an external file and declare it as a page like before.

javascript - Chrome extension: How to open a link in new tab? - Stack ...

javascript html google-chrome google-chrome-extension tabs
Rectangle 27 60

The problem is that you are violating manifest version 2's content security policy. To fix it all you have to do is get rid of inline script, in this case your background page. Turn it into a background script like this:

"background":{
  "scripts": ["background.js"]
},
chrome.browserAction.onClicked.addListener(function(activeTab){
  var newURL = "http://stackoverflow.com/";
  chrome.tabs.create({ url: newURL });
});

If, for some reason, you do need it to be a page, then simply include the script as an external file and declare it as a page like before.

javascript - Chrome extension: How to open a link in new tab? - Stack ...

javascript html google-chrome google-chrome-extension tabs
Rectangle 27 61

First, you've to set the permissions for the tab API :

"permissions": [
    "tabs"
]

And to store the URL :

chrome.tabs.getSelected(null,function(tab) {
    var tablink = tab.url;
});

The reason why its just for the popup (page action, browser action) is because your sending in a "null" into the first parameter. code.google.com/chrome/extensions/tabs.html#method-getSelected The docs state the first parameter is the windowId, if you want to use that in options, or background page, you would need to put in the window id or you will get the current tab your viewing which is undefined, options respectively.

yes it works, but not sure why chrome.tabs.getSelected method can not be found in the reference document.

The chrome.tabs.getSelected method has been deprecated, the correct method is listed at this below answer.

And, how to get links of all open tabs

How can I get the URL of the current tab from a Google Chrome extensio...

google-chrome google-chrome-extension browser-tab
Rectangle 27 61

First, you've to set the permissions for the tab API :

"permissions": [
    "tabs"
]

And to store the URL :

chrome.tabs.getSelected(null,function(tab) {
    var tablink = tab.url;
});

The reason why its just for the popup (page action, browser action) is because your sending in a "null" into the first parameter. code.google.com/chrome/extensions/tabs.html#method-getSelected The docs state the first parameter is the windowId, if you want to use that in options, or background page, you would need to put in the window id or you will get the current tab your viewing which is undefined, options respectively.

yes it works, but not sure why chrome.tabs.getSelected method can not be found in the reference document.

The chrome.tabs.getSelected method has been deprecated, the correct method is listed at this below answer.

And, how to get links of all open tabs

How can I get the URL of the current tab from a Google Chrome extensio...

google-chrome google-chrome-extension browser-tab