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 ?
Related
For example, I was using this:
<button onclick="editor.chain().focus().toggleBold().run()">
But I got the solution from the kind folks on the discord server.
For the menu item, specify type=button (otherwise browser might think it's a submit button type)
<button type=button onclick="editor.chain().focus().toggleBold().run()">
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>
I am using the Firefox webdriver for Selenium to scrape a webpage that looks to be rendered with React on the client side. The classes in the rendered DOM look dynamically generated, and seem to change with every new request. There are also many button elements on the page, some of which are not in the viewport. So my strategy is to search for a way to click on a button that contains text that I enter using selenium. Several buttons will contain the text, and I want to just find the first such button.
Using selenium/xpath, how would I select the first button that contained the text E9 1QJ?
<button>
<div><svg ...> </div>
<div>
<div>London</div>
<div>E9 1QJ</div>
</div>
</button>
<button>
<div><svg ...> </div>
<div>
<div>London Foo Bar</div>
<div>E9 1QJ</div>
</div>
</button>
Thanks
This should work:
{driver}.find_element_by_xpath("//button[div/div[text()='E9 1QJ']][1]")
But keep in mind that a solution like this it is not very flexible and could break with a minimum change in the html structure.
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>
I have some weirdness occurring while trying to switch from webrat to capybara. The error is this:
And I press "Create floob"
# features/step_definitions/web_steps.rb:27
no button with value or id or text 'Create floob' found (Capybara::ElementNotFound)
The html in my app looks like this:
<fieldset class="buttons">
<ol>
<input id="floob_submit" name="commit" type="submit" value="Create floob" />
</ol>
</fieldset>
I would have thought that capybara would look at the value of the buttons on the page, and reading the documentation this does seem to be the case, but it's not working! If I change the line in my cuke file to And I press "floob_submit" everything works, but I'd rather not change all my features...
Does anyone have any thoughts on why this might be happening and if there's a fix? Thanks friends!
The only thing I can see is that you aren't wrapping your input in an <li></li>. This might be confusing enough for the DOM to cause your problem.