We Keep Coding

insert value into input tag from chrome extension

I have written a chrome extension which can successfully insert value into input tags on many pages by simple jquery code
$("#myId").val('myvalue');`
except this page`
I have tried using javascript jquery but nothing works, Though chromes built in autofill and autofill extension can insert value efficiently.
From my chrome extension I want to insert value into these two input ID's "#loginEmailMobile" and "#clientpassword" . When I use .val() method it shows the value there but seems like floating. And don't work when I click on sign in. So how I can make it work? Please help.

The page is listening for keyboard events to update the UI as well, your method is only changing the .value property. If you want the page to "know" something changed, you should send a keyboard event to the inputs as well. The AutoFill extension seems to do this by calling someelement.dispatchEvent(new Event('input')) on the inputs, which seems to do the job.

Is the url permissions and schemes set for the website it is not working for?

How to build a chrome extension to highlight text on a specific URl

I am relatively new to both programming and developing chrome extensions. I am developing a chrome extension that will do this simple thing.
On selecting a text, show a button on clicking which the text will be highlighted. (Somewhat like the pin button)
When i revisit the page I can see what where the areas i highlighted.
So currently I have a extension working which can save the bookmark to the database. This is the link from which i got this understanding http://markashleybell.com/building-a-simple-google-chrome-extension.html. If you want i can share the actual code also but it is going to crowd the question.
I think I can make get the selected text to go in to the database if i use contextmenus. But this is what i intend to do is
select the text
A icon comes up (How do i trigger the jquery to add the button, which chrome api i need to use and in which file i should put the code)
3 On clicking the icon the text gets highlighted. (how should i change the DOM of the current page)
I can do the part of extracting the text and sending it to the Database.
The next problem i have no idea about what information I need to store in the database (Example do i need to store the start or end node) so that i can have the text highlighted when i return to the URl. How does a chrome extension start on its own to figure out what part of the page need to be highlighted.
In case you have a sample code that will be great or just tell me what is the logic and chrome api's i need to use.
I know the question is too broad but even if you have a few links that can help to understand this flow it will be great. The project i am working on it to create a far similar version of https://www.diigo.com/, with just the ability to store URL along with the highlighted notes.

Best practice: Encrypted email-addresses in a-elements and screen readers

According to the The Accessibility Project screen reads make use of JavaScript.
A common misconception among web developers is that screen readers only read the non-JavaScript page. Due to this misconception, we sometimes assume it’s unnecessary to make JavaScript apps and other functionality accessible. This is categorically false.
Source: MYTH: Screen readers don’t use JavaScript
The question for me is still, in which way?
I place emails similar to this using JavaScript. A small function decrypts the value and stores it in the href-attribute as well as it replaces the placeholder text:
<a data-value="[encrypted email]">This E-Mail is being protected against bots. […]</a>
Which becomes something like this on document ready:
somebody#somedmaincom
My questions are:
Is this way accessible?
Do I have to apply an aria-role in addition to make clear, that the content is replaced with the real values using JavaScript?

Is it accessible? It depends on your JavaScript function. It would be easier to look at a page where this was implemented.
A few comments:
In general, as far as a screen reader is concerned, a link is a link and the screen reader will just read the link text ("This email is being protected... ") and the fact that it's a link. It's up to the browser to do something when the link is activated (but see comments below).
Your sample code doesn't have the href attribute. This usually means that the "link" (it's not treated as a link without href) cannot be reached with a keyboard, which would be an accessibility problem. Fix this by adding href (with any value), e.g. add href="#".
How do you trigger your script? A screen reader user will use a keyboard, so you'll get an enter key press to activate the link. Do you watch for mouse click events? Links (<a href...>) are a special case, pressing enter on a link will trigger the onclick event, so you should be OK here when following the link.
You mention placeholder text: this is a link and not an input field, so I assume you change the link text? How do you do this? If it happens on mouse hover then it would not be triggered for keyboard users (including screen reader). Add e.g. an onfocus event that triggers the same function when the keyboard focus reaches that field.
When you change the link text using JavaScript then the screensaver should "see" the change and read the new text (if it still reads the old text try a different method to change the link text, there are several ways to do this in JavaScript). I'm not sure though if the screensaver will read the new text immediately or if you need to move the screen reader focus back onto the text again yourself. You can force the screensaver to read the new text (no matter where the focus is) by adding the attribute role="alert" to the container element that contains the text.
If you have any other mouse events you also need to add corresponding keyboard events. But I think this is everything. Post a link to an example page then I can comment further.

How can I make modifications to an HTML form that is automatically generated?

I'm creating a webform using a marketing automation platform. I want to add a field that functions with jquery to do an autocomplete. Unfortunately, the forms are generated through a WYSIWYG editor in the software, and then generated and put into the page when it renders. The only code for the form that appears in the HTML for the page is a simple variable placeholder - %%FORM::DEFINITION%% - which is then replaced with the form code when you visit the URL. The software support team tells me that making the change I want to make is impossible, which I see as a challenge.
The only thing I need to be able to do is add an id="autocomplete-dynamic" attribute to the input on the form. I had two ideas how I could achieve this.
The first, and most preferable option, would be some script that runs at the bottom of the page that simply inserts the attribute into the input tag after the page renders out. This would only be a client-side change, but since all this does is make the text field capable of looking up values out of another table, it should be fine. If someone had a script blocker in place, they would not be prevented from typing into the text field normally, it's just that the auto-lookup wouldn't work. We're trying to make it easier to select an item from a list of thousands of possibilities, but if someone had to type in their own entry without the autocomplete, it would not be a disaster. This seems like a clean solution, but I am not sure if it can be done.
The other possibility is to get the form code out of the software and embed it in a separate HTML document, and make the change there. You can extract the raw HTML for the form for use on another page, but pasting this code right back into the landing page causes errors. So, the thought then was that if I have taken the code generated by the software and put it in an HTML page on a separate web server, I could modify it as needed, and then turn around and use an iframe to stick it right back in the landing page. The software shouldn't complain because the form is being used on an external site like it's supposed to be... I have just hidden that external site back inside the platform-hosted page.
Option 1 would still be much easier to implement, I think, provided it is actually possible.
Thanks in advance.

Your first solution seems completely appropriate.
$(function() {
$('#myForm input').attr('id', 'autocomplete-dynamic');
});
This can be added anywhere inside a script tag because it's wrapped in a shorthand document.ready function, which waits to run until the DOM is ready.

CKEditor TextArea Refresh And Destroy

I'm running into an issue where I have a button on my page that has a CKEditor.
When the button is pressed I want to append text to the editor.
I used the following code:
$('#mtxDescription').append($(this).data('key'));
CKEDITOR.instances['mtxDescription'].updateElement();
However this does not work. The editor does not reflect the change. However when I inspect the editor I find that the textarea does show the appropriate text appended, its just the editor is not showing it. Does anyone know of a way to get around this. Also, just in case anyone is wondering, I do have the jquery CKEditor adaptor script referenced in my page.
Also, if a somewhat related, but separate issue.
I have a drop down list that will allow the user to toggle between the text area shown on the page being the CKEDitor WIZIWIG and going back to being a normal textarea again. However I can't seem to do this without literally refreshing the page, I want to do it through javascript/jquery so I don't have to refresh the page whenever the change the dropdown selection. I've already tried the built in destroy method. It doesn't seem to do anything visually, the editor does not revert back to a simple textarea.
Just in case you were going to ask for some more code, here is what my HTML page looks like:
<textarea id="mtxDescription" name="mtxDescription"></textarea>
Here is how I initialize the editor
CKEDITOR.replace('mtxDescription', {
sharedSpaces: { top: 'ed-top'}
});

I was able to solve this problem by using the following code instead of using jQuery CKEDITOR.instances.mtxDescription.insertHtml($(this).data('key')) I still need a way to remove the editor at runtime.