I'm brand new to Chrome Extension creation and was hoping someone could direct me to some documentation specific to my goals.
I'd like to create a form-like text box (screenshot of text-box) that sits on the Chrome omnibar where the Extension icons stack up. I'd like to be able to type plain text into this box while web-browsing. Also, I'd like to be able to tap Ctrl+K and have the cursor jump into this box and highlight whatever's there for easy copy/pasting.
Essentially, I want to use Firefox's search-bar/box presentation in Chrome as a scratch-pad for taking plain text notes while web-browsing.
I followed the elementary documentation on creating an extension and the HTML I wrote works well in presentation when clicking the icon-button. But I don't want to have to click a button. I just want the Form box to exist on the omnibar persistently and I also want to access it via Ctrl+K.
Can anybody help?
Here's the HTML I wrote (looks just like the Firefox search-bar/box):
<html>
<form action="">
<p>
<input type="text" size="40" />
</p>
</form>
</html>
Related
Using simple HTML code, no JavaScript, nothing fancy, I use this HREF
Click here
Clicking on the link in IE, FireFox, Edge does open a new tab for https://www.example.com on click. In Chrome (version 79), the click just redisplays the current page.
This happens on Chrome desktop and phone (Android). There are no add-ins to my installation of Chrome; no popup or ad blocking installed.
Why doesn't Chrome open a new tab when target="_blank" is used? Thanks.
Added
The issue seems to be with an HREF being inside a FORM element. The FORM element is as follows:
<form action='' method='post'>
An HREF with target="_blank" outside the FORM element works properly. Just not inside the FORM element.
But still puzzled as to why that would be the case...and for a workaround or solution.
Added more - plus code
There's a button inside the form, and the button contains an image, and the link in the button will not open up a new tab.
Simple form with the button
<form action='' method='post'>
<p>inside the form</p>
<p><button><img src="https://via.placeholder.com/150 " width="24" height="24" class='button_img' alt='delete' /> that's a button</button></p>
<p><button>that's a button </button></p>
</form>
So, with even further testing, the click to open a new tab won't work in Chrome when the HREF is wrapped around an button with an image inside a form. But works in FireFox and Edge.
Why?
There are four image/buttons inside the form. The fourth one is the HREF/blank. Items 1-2-3 are form submittals; values need to be passed to the form processing page. The 4th item doesn't need to be processed by the form, but it is inside the form so that all four items will be on the same line. If I place the 4th (HREF/blank) outside of the form, then the 4th item is wrapped around to the next line.
a
The <button> tag cannot be opened in a new tab the same way an <a> does.
You can use this instead:
<p>
<button onClick="window.open('https://www.bklnk.com/B004RVZRL0');">
<img src="https://via.placeholder.com/150 " width="24" height="24" class='button_img' alt='delete' />
that's a button
</button>
</p>
If you visit www.arbetsformedlingen.se from a mobile, you will find a menu.
If you open that menu, you can only access items within that menu since tapping outside of the menu will close the menu.
If you for some reason are using a keyboard, you cannot tab out of
that menu.
However, visitors who uses the screen reader VoiceOver in IOS can simply move out of that menu by using the swipe left/right gestures to access the previous/next object in the DOM.
Question: Is there some way to prevent those users to access objects outside of the menu when the menu is visible?
An unsuitable solution due to the CMS would be to place the main content and the menu on the same node level, like in the simplified code below:
<body>
<div class=”maincontent” aria-hidden=”false”>
// Main content.
</div>
<div class=”mobilemenu” aria-hidden=”true” style="display:none">
// Menu.
</div>
</body>
When the menu is opened, the aria-hidden and display:none are toggled in order to just show the page contents or the menu.
Another unsuitable solution would be to toggle aria-hidden to every other object when the menu is opened, but that is impossible due to performance issues.
So, any piece of advice, thoughts etc are very welcome!!!
Using HTML5, you can set the "tab-index" to positive numbers on the elements within the menu. This will set focus to those elements. `
<div class="menu-container">
<div class="menu">
<div tabindex="1">Menu Item 1</div>
<div tabindex="2">Menu Item 2</div>
<div tabindex="2">Menu Item 3</div>
</div>
</div>
This may not be the best solution depending on what your trying to accomplish and what your code structure looks like.
You'll want to be sure to use the "tab-index" attribute correctly as to not break accessibility.
Good description and example
WebAIM-tabindex-accessibility
Good Evening. I am new to SharePoint 2013 and would like to put a basic web part on my site that is just a form to allow my users to do a google web search from our intranet page and the search results would open in a new tab or window.
I have the script inserted into a script editor web part, when Im in the edit snippet window the preview below my code appears and works as tested, but when I save the web part to my page when I try to search the page just refreshes and nothing is passed to google.
Here is the code in my script web part:
<script language="JavaScript" type="text/javascript">
function search_google(){
window.open("http://www.google.com/search?q="+document.search.query.value);
}
</script>
<form name="search">
<input type="text" name="query" value="">
<input type="submit" value="Search Google" onClick="search_google()">
</form>
Any help would be greatly appreciated.
I know this is an old post, but to those that stumble across it: the reason for the page refreshing behaviour is because of the input type of "submit" on the "Search Google" input element. Submit always causes a page refresh in SharePoint (causing your onClick event handler to be ignored) UNLESS the page is in edit mode.
An input type of "button" should give you the desired behaviour in either page mode.
HTH, Bruce
I have been using display.none, for the hid-whens for example, all the hidden fields were kept in a section and section was hidden from web by using Display.none.
This is working for Internet Explorer till IE 9, but for IE 10 all the hidden fields are shown.
Can anyone help in this matter. Any alternative or approach.
Without seeing the page it sis very difficult to guess.
Try validating the html through one of the many online html validators as something may not be closed or Notes might have given you an unwanted code addition .
Try adding a background color to the css #wrapper to make sure the css is being called.
Take a copy of the form and start removing all other elements one section at a time to see if something else is causing the issue.
Add {meta http-equiv="X-UA-Compatible" content="IE=10;IE=9; IE=8; IE=7; IE=EDGE" /} as the very top meta tag and see if that fixes it. Replace the curly braces obviously.
All the best in finding the issue.
It sounds like just the section element is getting hidden. Without seeing the code I can't tell why that changes between ie 9 and 10 but ie is famous for having varying behavior between versions.
One alternative that comes to mind: You could wrap the section and the fields in a DIV element using pass thru HTML and set that div's style to display:none. That is pretty standard and should work across browsers.
Update: To give you an idea what I'm talking about, check out this jsfiddle.
HTML:
<form>
<div class="wrapper">
<input type="text" name="Field 1" /><br />
<input type="text" name="Field 2" /><br />
<input type="text" name="Field 3" />
</div>
<span>Some text that won't be hidden.</span>
</form>
CSS:
.wrapper {
#display:none;
}
You can remove the # next to the display:none and see the difference, even in IE 10.
You'll need to look closely at the HTML being rendered by Domino and make sure that in fact all the fields you are trying to hide are surrounded by the DIV that is hidden.
Today I made my first Chrome extension and it's running good.
This extension is very simple it permits to the user to create a list of vocabulary in french and dutch.
When the pop-up opens the first field has the focus because I use .focus() for that. That's OK.
But when I press the TAB key, the focus disappears. I don't know where it goes.
If I click on the first field then I can fly to the second field and after to the submit button.
I dont want to click on the field. My goal is to use this extension only with the keyboard.
I try to solve this with 'tabindex' but it did not work.
Here the code (simplified) of my popup.html
<div>
<form action="#">
<div><h1>Vocabulaire / Woordenschat</h1></div>
<div><label for="fr">FR:</label><input type="text" id="fr"></div>
<div><label for="nl">NL:</label><input type="text" id="nl"></div>
<div><input type="submit" id="enregistrer" value="Sturen"></div>
</form>
I use Chrome version Version 24.0.1312.57 m
Any Idea ?