Addin behavior multiple open Word documents

Question

Problem Found! I scrubbed stackoverflow and found: this. This appears to be the issue. Browsersync has funny behavior that leads to these issues occurring. So my new question is: How does one deploy a word add-in without browser-sync? I've tried running tsc and node directly on the app.ts and app.js respectively, but that just gives me an error: ReferenceError: Office is not defined

---

I am new to developing office add-ins. I have an add-in that works when I have one document open. If I have multiple documents open, the behavior that I expect is that the add-in's functions, when actuated, should apply only to the document in focus.

This does not actually happen. I've done multiple tests, and can't quite figure out what is going on. Sometimes, pressing a button in the add-in window of the second opened document will perform actions on the first open document. Sometimes, on the second.

EDIT: Here is a minimal working example:

(function () {

    // The initialize function is run each time the page is loaded.
    Office.initialize = function (reason) {
        $(document).ready(function () {

            // Use this to check whether the API is supported in the Word client.
            if (Office.context.requirements.isSetSupported('WordApi', 1.1)) {
                // Do something that is only available via the new APIs
                $('#clear').click(clearHighlighting);
                $('#supportedVersion').html('This code is using Word 2016 or greater.');
            } else {
                // Just letting you know that this code will not work with your version of Word.
                $('#supportedVersion').html('This code requires Word 2016 or greater.');
            }
        });
    };

    var highlighted = [];

    function clearHighlighting() {
        Word.run(function (context) {
            console.log("clearing highlighting");
            document.getElementById("status").innerHTML = "";
            var body = context.document.body;
            body.font.highlightColor = null;
            return context.sync();

        }).catch(function (error) {
            console.log('Error: ' + JSON.stringify(error));
            if (error instanceof OfficeExtension.Error) {
                console.log('Debug info: ' + JSON.stringify(error.debugInfo));
            }
        });
    };
});

1. My question is, what is the expected behavior in this situation?
2. How can I limit actions on the document in focus?
3. Are the add-in's elements duplicated for each open document? If not, changing text in a div of the plugin may or may not be relevant to the document in focus.

EDIT 2

The behavior I observe is that any document that is open with the taskpane for the add-in open will have the function called, regardless of which taskpane I actually click the button on.

The console shows that the function is called once (from the console.log statement), but the documents are ALL modified.

I am printing the Office.document.url to the console. If I attache a debugger to Doc A, and press the add-in button in Doc A, I'll see the console log only the url of Doc B, but both Doc A and Doc B's status div will show their respective URLs.

  console.log("clearing highlighting"+Office.context.document.url);
  document.getElementById("status").innerHTML = Office.context.document.url;

In the above code snippet, the first line only shows in the console once for the second document (even though the button is clicked in the first), and the second line performs the action in both documents. It should be noted that the debugger is attached to the second document.

Edit: I refactored all the code into a new TypeScript add-in. I observe the same behavior. All open documents are affected:

(() => {
// The initialize function must be run each time a new page is loaded 
 Office.initialize = (reason) => {
  $(document).ready(() => {
 (window as any).Promise = OfficeExtension.Promise;
  $('#clear').click(clearHighlighting);
 });
};

async function clearHighlighting() {

await Word.run(async (context) => {
  console.log("clearing highlighting"+Office.context.document.url);
  document.getElementById("status").innerHTML = Office.context.document.url;
  var body = context.document.body;
  body.font.highlightColor = null;

  await context.sync();
});

}
})();

Answer 1

I am officially an idiot.

This took me way too long to debug. Here are the findings.

1. This was indeed a problem with browsersync. This behavior is present only when testing, which is why those who tried to reproduce this behavior were unable to.

2. Deploying this code is as simple as putting it into a web server. Since it's all client side code, any web server will do (no need to fuss with node.js).

Thanks everyone for your help.

If anyone else experiences this problem, this post explains it visually.